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

Question

我正在创建一个购物 list ，可以在其中添加、删除和划掉元素。我现在的问题涉及划掉元素并能够撤消它。单击元素(文本)，将把它划掉，双击该元素将取消它。不幸的是，将元素添加到列表时生成的每个“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>