如何在此代碼中更高效地編寫jQuery？

Question

我有一個基本的待辦事項列表，可以通過它單擊li元素來打開和關閉.completed css類。 此外，當我單擊位於li內跨度中的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> 

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

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

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