javascript - jQuery - 单击元素后，获取 li 的数据项并将删除线应用于 li 中的文本(动画？)

Question

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

我如何将单击的图像与正确的列表名称连接起来，然后将字体颜色更改为灰色并为其赋予不同的颜色(红色)删除线？我很想为删除线设置动画，但这可能太复杂了。欢迎提出建议:)

感谢任何帮助!

下面是一段代码:

CSS

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

.found {
  color: #282828!important;
}

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

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


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

Answer 1

1. 需要在strikeThrough函数定义中添加arg
2. 您不能使用 this 对象，因为该函数是在窗口范围内调用的，因此 this 将引用 strikeThrough 函数内的窗口对象。您可以使用 .call 或 .apply 来设置范围，但我认为没有必要。
3. 更改了 data-item 以匹配每个 li
的类名

PS:您的问题和您的代码表达方式不同，因此请查看演示并让我知道您的意见。

// 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(item) {
  var $item = $('.itemList li.' + item);
  if ($item.hasClass('stroked')) { //already stroked
    return;
  } else {
    $item.addClass('stroked').prepend('<span class="linethrough">       </span>').find('span').css('width', $item.width()).addClass('movein');
  }
}

.stroked {
    color: #282828;
    position: relative;
}
.linethrough {
    position: absolute;
    height: 10px;
    left: -200px;
    top: 0;
    text-decoration: line-through;
    white-space: pre;
    color: red;
    -webkit-transition: left 1s ease;
    -moz-transition: left 1s ease;
    -o-transition: left 1s ease;
    -ms-transition: left 1s ease;
    transition: left 1s ease;
}
.linethrough.movein {
    left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="picItem" data-item="dart">
  <img src="Dart.png" alt="Dart" />
</div>

<div class="picItem" data-item="dice">
  <img src="Dice.png" alt="Dice" />
</div>

<div class="itemWrapper">
  <ul class="itemList">
    <li class="olive">Olive</li>
    <li class="dart">Dart</li>
    <li class="dice">Dice</li>
  </ul>
</div>