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

我有一个基本的待办事项列表，通过它，我可以单击li元素来切换.completedcss类的打开和关闭。此外，当我单击li中的span中的X时，我可以删除li。一切正常，但我的IDE告诉我有一个重复的jQuery选择器，它是$（“ul”）。如何更有效地编写jQuery

//通过单击勾选特定的todo
$（“ul”）。在（“单击”，“li”，函数（）{
$（此）.toggleClass（“已完成”）；
});
//单击X删除待办事项
$（“ul”）。在（“单击”，“跨距”，功能（事件）{
//除掉李
$（this）.parent（）.fadeOut（500，函数（）{
$（this.remove（）；
});
//防止事件影响父元素
event.stopPropagation（）；
});
ul{
列表样式：无；
}
.完成{
颜色：灰色；
文字装饰：线条贯通；
}
#容器{
宽度：100px；
保证金：0自动；
}


X代码
X睡眠
吃
X跑
X跳跃

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

$("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();
});

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

$("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();
});

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

$("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();
});

或

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

$("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();
});

或

做链锁。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();
});

做链锁。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();
});

$（“ul”）.on（）.on（）$（“ul”）.on（）.on（）