如何在这段代码中更高效地编写 jQuery？答案

【问题标题】：How do I write the jQuery in this code more efficient?如何在这段代码中更高效地编写 jQuery？
【发布时间】：2017-04-16 22:00:27
【问题描述】：

我有一个基本的待办事项列表，通过它我可以单击 li 元素来打开和关闭 .completed css 类。此外，当我点击 li 内的 span 覆盖的 X 时，我可以删除 li >。一切正常，但我的 IDE 告诉我我有一个 重复的 jQuery 选择器，即 $("ul")。如何更高效地编写这个 jQuery？

// check off specific todo by clicking
$("ul").on("click", "li", function () {
    $(this).toggleClass("completed");
});

// click on X to delete todo
$("ul").on("click", "span", function (event) {
    // remove li
    $(this).parent().fadeOut(500, function () {
        $(this).remove();
    });
    // prevent event from affecting parents element
    event.stopPropagation();
});

ul {
  list-style: none;
}

.completed {
    color: grey;
    text-decoration: line-through;
}

#container {
  width: 100px; 
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <ul>
        <li><span>X</span> Code</li>
        <li><span>X</span> Sleep</li>
        <li><span>X</span> Eat</li>
        <li><span>X</span> Run</li>
        <li><span>X</span> Jump</li>
    </ul>
</div>

【问题讨论】：

$("ul").on().on()

标签： javascript jquery html css optimization

【解决方案1】：

最简单的做法是使用链接：

$("ul").on("click", "li", function () {
    $(this).toggleClass("completed");
})
// click on X to delete todo
.on("click", "span", function (event) {
    // remove li
    $(this).parent().fadeOut(500, function () {
        $(this).remove();
    });
    // prevent event from affecting parents element
    event.stopPropagation();
});

对.on() 的第一次调用将返回您使用初始$("ul") 构造的jQuery 对象。因此，您可以立即再次致电.on()。

在这种特殊情况下，多余的 $("ul") 可能不是什么大问题，但养成最小化 DOM 查找的习惯是件好事。

或者，您总是可以将 jQuery 对象存储在一个变量中：

var $ul = $("ul");

// check off specific todo by clicking
$ul.on("click", "li", function () {
    $(this).toggleClass("completed");
});

// click on X to delete todo
$ul.on("click", "span", function (event) {
    // remove li
    $(this).parent().fadeOut(500, function () {
        $(this).remove();
    });
    // prevent event from affecting parents element
    event.stopPropagation();
});

【讨论】：

【解决方案2】：

您可以将这些方法链接在一起或存储对选择器对象的引用：

$("ul").on("click", "li", function () {
    $(this).toggleClass("completed");
}).on("click", "span", function (event) {
    // remove li
    $(this).parent().fadeOut(500, function () {
        $(this).remove();
    });
    // prevent event from affecting parents element
    event.stopPropagation();
});

或者

var $ul = $("ul");

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

$ul.on("click", "span", function (event) {
    // remove li
    $(this).parent().fadeOut(500, function () {
        $(this).remove();
    });
    // prevent event from affecting parents element
    event.stopPropagation();
});

【讨论】：

【解决方案3】：

做链接。 jQuery 就是为这样使用而设计的。

$("ul").on("click", "li", function () {
    $(this).toggleClass("completed");
}).on("click", "span", function (event) {
    // remove li
    $(this).parent().fadeOut(500, function () {
        $(this).remove();
    });
    // prevent event from affecting parents element
    event.stopPropagation();
});

【讨论】：