javascript - 将监听器附加到多个 child

Question

我正试图从我的页面中删除 jquery，并将一些功能重写为纯 js。 有 2 个带有类作业的列表，包含一些 li 元素。每个 li 元素都应该有一个点击操作，以将类“active”添加到它。

在 jquery 中很简单:

$('.work li').on('click', function () {
            var that = $(this);
            that.parent().find('li.active').removeClass('active');
            $(this).addClass('active');
        })

在纯 js 中是否有更好的解决方案，而不是用嵌套循环制作这样的东西:

    var lists = document.getElementsByClassName('work');
    for(var i=0; i<lists.length; i++){
       var children = lists[i].querySelectorAll('li');
       for(var j=0; j<children.length;j++){
        children[j].addEventListener();
       }
    }

Answer 1

There are 2 lists with class work, containing few li elements. Each li element should have an action on click to add class 'active' to it.

您可以通过向 querySelectorAll 返回的所有 li 添加一个事件监听器来创建整个功能。 querySelectorAll 返回一个 nodeList 而不是一个数组，因此需要映射它以便迭代它。但是，请注意我们仍在迭代集合。

示例片段:

var lists = document.querySelectorAll(".work li"), 
    doSomething = function() {
        [].map.call(lists, function(elem) { elem.classList.remove("active") });
        this.classList.add("active");
    };
[].map.call(lists, function(elem) {
    elem.addEventListener("click", doSomething, false);
});

li { cursor: pointer; }
.active { background-color: yellow; }

<ul class="work"><li>One</li><li>Two</li><li>Three</li></ul>
<ul class="work"><li>Four</li><li>Five</li><li>Six</li></ul>

---

事实上，您也可以使用事件委托(delegate)并仅在 ul 上添加事件监听器，然后使用 event.target 来处理您的例程。这比为每个 li 添加一个事件监听器要好，以防它们很多。将只有与 ul 一样多的处理程序。

---

Is there a nicer solution in pure js rather than making something like this with nested loops

不是真的。无论如何，您必须遍历元素集。在爵士乐方面更好，是的。在避免循环方面更好，不。在效率方面更好，是的。将上面的 vanilla javascript 代码与你问题中的 jQuery 代码进行比较:

$('.work li').on('click', function () { // internally will iterate and add listener to each li
    var that = $(this);
    that.parent().find('li.active').removeClass('active'); // go to parent and then find li
    $(this).addClass('active');
});

.