javascript - 添加/删除除事件之外的所有类

Question

是否有一种简单的方法可以使用 JavaScript 删除除 eventtarget 之外的所有其他类。

例如，如果我有 UL:

<ul>
     <li>list element</li>
     <li>list element</li>
     <li>list element</li>
     <li>list element</li>
     <li>list element</li>
     <li>list element</li>
</ul>

我添加了带有事件处理程序的点击事件监听器:

var UL = document.querySelector('ul');

function eventHandler(e) {
    var thiz = e.target;
    document.querySelectorAll('ul li').classList.remove("active");
    thiz.classList.add("active");
}

UL.addEventListener('click', function (e) {
    eventHandler(e);
});

如何在被单击的元素上添加一个类，同时删除所有其他“事件”类。

这是一个 fiddle http://jsfiddle.net/298ZV/

Answer 1

没有 jQuery:

[].forEach.call(document.querySelectorAll('ul li'), function(a){
    a.classList.remove('active');
});

JS Fiddle demo .

这使用Array.prototype.forEach()来迭代NodeList并在每个元素上执行该函数。

您还可以进一步“简化”(尽管请注意恐吓引号...)，并在同一个 forEach() 中执行所有操作:

function eventHandler(e) {
    var thiz = e.target;
    [].forEach.call(document.querySelectorAll('ul li'), function(a){
        a.classList[a == e.target ? 'add' : 'remove']('active');
    });
}

JS Fiddle demo .

关于 @adeneo 在 comments to his answer 中表达的担忧，如果 li 元素包含其他元素，它们将成为 event.target 我添加了一个 simple closest() 函数来查找您要查找的元素:

var UL = document.querySelector('ul');

function closest(origin, elem) {
    var current = origin;
    elem = elem.toLowerCase();
    while (current.tagName.toLowerCase() !== 'body' && current.tagName.toLowerCase() !== elem) {
        current = current.parentNode;
    }
    return current;
}

function eventHandler(e) {
    var that = closest(e.target, 'li');
    [].forEach.call(document.querySelectorAll('ul li'), function(a) {
        a.classList[that === a ? 'add' : 'remove']('active');
    });
}

UL.addEventListener('click', function (e) {
    eventHandler(e);
});

JS Fiddle demo .

引用文献:

• Array.prototype.forEach() .
• document.querySelector() .
• document.querySelectorAll() .
• Element.classList .