小编use*_*345的帖子

jQuery - 单击项目后,获取 li 的数据项并对 li 中的文本应用删除线(动画?)

我有一堆图像,它们对应于一个包含他们名字的列表。单击图像时,它会淡出图像,然后使用 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)

html javascript css jquery

5
推荐指数
1
解决办法
521
查看次数

jquery计数器 - 允许多次点击li但只计算一次

我正在制作一个像隐藏物品一样的迷你游戏.我是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)

html javascript jquery

3
推荐指数
1
解决办法
693
查看次数

标签 统计

html ×2

javascript ×2

jquery ×2

css ×1