jquery 定位单个生成的列表标签

Question

我正在创建一个购物清单，可以在其中添加、删除和划掉项目。我现在的问题涉及划掉项目并能够撤消它。单击项目（文本），将把它划掉，双击该项目将取消交叉 it.Unfortunately，每个 "li" 标签（with class="food"）生成时已添加到列表的项目将在单击时被划掉。

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

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

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

jquery 定位单个生成的列表标签

jquery targeting individual generated list tags

jquery

css

list

tags

unique-id