Question

    $("ul").on("click", "li", function () {
        $(this).toggleClass("completed");
    });

    $('ul').on('click', "li span", function (event) {
        event.stopPropagation();
        $(this).parent().fadeOut(500, function () {
            $(this).remove();
        });
    });

情况 - 使用表单添加了包含span项目的新项目，我希望他们能够拥有所有其他项目所具有的行为。

有更好的方法吗？带说明符的多个声明似乎是多余的。

这是我第一次使用jQuery，并不知道如何绕过这种冗余。

谢谢。

Answer 1

为元素指定一个类名，并通过选择类来使用相同的逻辑。

<li class="class-name">Text<span class="class-name"></span></li>

$('ul').on('click', '.class-name', function(e) {
 e.stopPropagation();

 if(e.target.nodeName == 'SPAN') {
  // Code for span
 } else if(e.target.nodeName == 'LI') {
  // Code for li
 }
})

Answer 2

完整示例：

$('ul').click(function (e) {
  switch (e.target.nodeName) {
    case 'LI':
      $(e.target).addClass('completed')
      break
    case 'SPAN':
      $(e.target).parent().slideUp(500, function () {
        $(e.target).parent().remove()
      })
  }
})

ul {
  width: 200px;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}
li {
  padding: 3px 0;
  text-align: center;
  cursor: pointer;
}
span {
  font-family: Arial, sans-serif;
  font-weight: bold;
  color: #f00;
}
.completed {
  color: #0f0;
}

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>

<ul>
  <li>Todo 1 <span>x</span></li>
  <li>Todo 2 <span>x</span></li>
  <li>Todo 3 <span>x</span></li>
  <li>Todo 4 <span>x</span></li>
  <li>Todo 5 <span>x</span></li>
</ul>

PS：与其他人不同，此解决方案只为整个列表注册一个事件监听器，无论项目数如何。

Answer 3

您可以将它们链接起来，jQuery无论如何都会将这些事件监听器添加到UL中，并自动过滤基于event.target的

$("ul").on("click", "li", function () {

    $(this).toggleClass("completed");

}).on('click', "li span", function (event) {

    event.stopPropagation();

    $(this).parent().fadeOut(500, function () {
        $(this).remove();
    });

});

是否有更好的方法来嵌套两个jquery选择？

3 个答案: