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

Question

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

例如，如果我有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>

我使用事件处理程序添加click事件监听器：

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

如何在被点击的元素上添加一个类，同时删除所有其他的＆＃34; active＆＃34;类。

这是一个小提琴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 < / em> 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。

Answer 2

执行一些不同的操作，将事件处理程序附加到LI，并将它们保存在变量中，然后遍历LI并从非this

中删除该类

var LI = document.querySelectorAll('ul li');

for (var i=LI.length; i--;) {
    LI[i].addEventListener('click', eventHandler);
}

function eventHandler() {
    this.className = 'active';

    for (var i=LI.length; i--;) {
        if (LI[i] != this) LI[i].className = '';
    }
}

FIDDLE