Question

我有一个基本的待办事项列表，我可以点击 li 元素来打开和关闭 .completed css类。此外，当我点击 li 内的 X 时，我可以删除 li 。一切正常，但我的IDE告诉我，我有一个重复的jQuery选择器，这是 $（＆＃34; ul＆＃34;）。如何更有效地编写这个jQuery？

＆＃13;

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

＆＃13;

ul {
  list-style: none;
}

.completed {
    color: grey;
    text-decoration: line-through;
}

#container {
  width: 100px; 
  margin: 0 auto;
}

＆＃13;

<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>

＆＃13;

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

如何更有效地编写此代码中的jQuery？

3 个答案: