jquery 针对单个生成的列表标签答案

【问题标题】：jquery targeting individual generated list tagsjquery 针对单个生成的列表标签
【发布时间】：2018-03-14 00:04:11
【问题描述】：

我正在创建一个购物清单，可以在其中添加、删除和划掉项目。我现在的问题涉及划掉项目并能够撤消它。单击项目（文本），将其划掉，双击该项目将取消它。不幸的是，将项目添加到列表时生成的每个“li”标签（带有 class="food"）都将被划掉点击时。

      $(".food").on({
            click: function(){
              $(this).parent().css("text-decoration","line-through"); 
            },
            dblclick: function(){
              $(this).parent().css("text-decoration", "none"); 
            }
        });

我明白为什么每个项目都成为目标。我的问题是在生成每个“li”标签时找到一种生成唯一 id 的方法，然后编写一种方法来单独定位它们或其他一些解决方案。我需要一些帮助来解决这个问题！链接赞赏。

【问题讨论】：

添加与脚本相关的 html 会缩小问题的范围
如果 li 有类 food 那么你应该从这两个函数中删除 .parent() 并且它可能会起作用。如果您可以向我们提供 html，将会有更多帮助。
试试这个：jsfiddle.net/nL04cuvy/1
请务必提供您的相关html，以便我们进一步帮助您

标签： jquery css list tags unique-id

【解决方案1】：

删除.parent()就完成了

$(".food").on({
  click: function() {
    $(this).css("text-decoration", "line-through");
  },
  dblclick: function() {
    $(this).css("text-decoration", "none");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="food">apple</li>
  <li class="food">mango</li>
  <li class="food">orange</li>
  <li class="food">banana</li>
  <li class="food">black current</li>
</ul>

【讨论】：