我有一堆图像,它们对应于一个包含他们名字的列表。单击图像时,它会淡出图像,然后使用 data-item 在列表中找到其对应的名称,然后将其划掉红色并将列表项单词更改为灰色。我有代码,但它不工作或在控制台中抛出任何错误。我是 jQuery 的新手。
我如何将单击的图像与正确的列表名称连接起来,然后将字体颜色更改为灰色并赋予它不同的颜色(红色)?我很想为删除线设置动画,但这可能太复杂了。欢迎提供建议:)
任何帮助表示赞赏!
这是代码的一个片段:
CSS
.stroked {
text-decoration: line-through;
color: red;
}
.found {
color: #282828!important;
}
Run Code Online (Sandbox Code Playgroud)
HTML
<!--image items-->
<div class="picItem" data-item="Dart">
<img src="Dart.png" />
</div>
<div class="picItem" data-item="Dice">
<img src="Dice.png" />
</div>
<div class="itemWrapper">
<ul class="itemList">
<li class="olive">Olive</li>
<li class="dart">Dart</li>
<li class="dice">Dice</li>
</ul>
</div>
<!-- /itemWrapper -->
Run Code Online (Sandbox Code Playgroud)
JS
// Handle the picture item clicks
$('.picItem').on('click', function () {
//grab appropriate list item view data-item for strikeThrough function
strikeThrough($(this).data('item'));
$(this).fadeOut(400, function () {
});
}); …Run Code Online (Sandbox Code Playgroud) 我正在制作一个像隐藏物品一样的迷你游戏.我是jQuery的新手.我有一个表示页面上图像的项目列表.当需要提示来查找项目时,可以单击列表项目,它将启动动画以显示同名对象的位置.有一个计数器提供3个提示.这一切都有效.
我遇到的问题是,如果您多次单击同一个列表项,则会使用三个提示.如何让计数器只对每个列表项计数一次?因此,换句话说,您可以多次单击列表中的相同项目,但它只会将计数器减一.然后,如果您单击一个不同的列表项,它将再次减少一个计数器.
这是jsfiddle:http://jsfiddle.net/gudinne/ej4mLoze/
谢谢你的指导!
JS
// hintCounter of 3 counts down to 0 and changes behaviors
var hintCounter = 3;
$('.itemList li').on('click', function () {
// check if has hints
if (hintCounter > 0) {
hintCounter--;
$('.xHints').html(hintCounter + ' Hints');
} else {
// else show the message out of hints
$('.directions').html('Sorry you are all<br /> out of hints. <br />Keep Searching!');
}
});
Run Code Online (Sandbox Code Playgroud)
HTML
<div class="itemWrapper">
<ul class="itemList">
<li class="baseball">Baseball</li>
<li class="bacon">Bacon</li>
</ul>
<div id="hintBox"> <span …Run Code Online (Sandbox Code Playgroud)