Javascript jQuery-单击项后，抓取li的数据项，并对li中的文本应用删除（动画？）

我有一堆图片，对应于一个包含他们名字的列表。 单击图像时，它会淡出图像，然后使用数据项在列表中找到相应的名称，然后用红色将其划掉，并将列表项单词更改为灰色。我有代码，但它不工作或抛出任何错误的控制台。我不熟悉jQuery

如何将单击的图像与正确的列表名称连接起来，然后将字体颜色更改为灰色，并使其具有不同的颜色（红色）穿透？我很想让罢工变得生动起来，但这可能太复杂了。欢迎提供意见：）

感谢您的帮助

以下是代码片段：

CSS

.stroked {
  text-decoration: line-through;
  color: red;
}

.found {
  color: #282828!important;
}

 // 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 () {
  });
});


 function strikeThrough() {
     if ($('.itemList li').hasClass('stroked')) {
      return;
  } else {
      $(this).addClass('stroked');
      $(this).addClass('found');
  }
}

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 -->

您需要在删除线函数定义中添加arg

您不能使用

此

对象，因为该函数是在窗口作用域上调用的，因此此函数将引用删除线函数内的窗口对象。您可以使用

.call

或

或

来设置范围，但我认为没有必要这样做

更改了

数据项

以匹配每个

li的类名

PS:您的问题和您的代码说明了不同的情况，请查看演示并告诉我您的意见

//处理图片项目单击
$（'.picItem'）。在（'click'，function（）上{
//为删除线函数获取适当的列表项视图数据项
删除线（$（this）.data（'item'））；
$（this）.fadeOut（400，function（）{}）；
});
函数删除线（项目）{
变量$item=$（'.itemList li.'+item）；
如果（$item.hasClass（'stroked'））{//已经stroked
返回；
}否则{
$item.addClass（'stroked'）.prepend（''）.find（'span'）.css（'width'，$item.width（））.addClass（'movein'）；
}
}

.stroked{
颜色:#282828 ;；
位置：相对位置；
}
.linethrough{
位置：绝对位置；
高度：10px；
左：-200px；
排名：0；
文字装饰：线条贯通；
空白：预处理；
颜色：红色；
-webkit转换：左1秒轻松；
-moz转换：左1秒轻松；
-o型过渡：左1秒；
-ms转换：左1秒轻松；
过渡：左1秒轻松；
}
.linethrough.movein{
左：0px；
}

橄榄油
省道
掷骰子

在顶部传递的参数还必须定义为

删除线（）函数的参数，以便在定义要删除的元素时可以使用该参数

因此，将
删除线（）函数替换为如下所示：

function strikeThrough(obj) {
 $('.itemList li').each(function() {
      if ($(this).text() == obj)
          $(this).addClass('stroked').addClass('found');
 });
}

下面是一个演示：

对于删除线效果，请查看以下问题：
Ahhh。。必须将删除线函数连接到项目。这似乎可行，但列表项的字体颜色变为灰色，删除线也变为灰色。我该如何使罢工通过红色和它下面的字灰色？谢谢@user826345划线和文本是同一文本的一部分。划线只是应用于文本的一种样式，我认为你不能有不同的颜色。但是，这是可能的，但是需要昂贵的标记和脚本。谢谢，Vega！我在更改删除线颜色时发现了这个问题：我将尝试一下。再次感谢您或您的帮助：）@user826345看起来很有趣，我会检查一下，看看是否可以制作相同的动画。@user826345我用最小的更改和CSS制作了一些动画。看看，让我知道。哦！谢谢你的动画链接。我去看看！我也很感激看到一种不同的方法来解决这个问题+1.