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

您需要在strikeThrough函数定义
您不能使用this对象，因为在窗口范围内调用该函数，因此这将指向strikeThrough函数内的窗口对象。您可以使用.call或.apply来设置范围，但我认为不需要它。
更改了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>

Answer 2

您在顶部传递的参数也必须定义为strikeThrough()函数的参数，以便在定义要触发的元素时使用它。

所以请替换你的strikeThrough()函数：

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

以下是演示：http://jsfiddle.net/ph5z3pwx/

对于删除线效果，请查看以下问题：How do I animate a strike through effect using JavaScript on a piece of text?

jQuery - 点击一次项目后，抓取li的数据项并将一个删除线应用于li中的文本（动画？）

2 个答案: