Javascript 在单击其他任何内容时删除类

这似乎是一个非常简单的问题，但我在试着让它发挥作用时遇到了很多麻烦

我有一系列元素分布在页面的不同部分

<span class="click-element"><span>
---
<span class="click-element"><span>
--
<span class="click-element"><span>

然而，我遇到的问题是，第二个事件似乎只是覆盖了第一个事件。我怎样才能解决这个问题？或者有没有更干净的方法来做我想做的事情

---

不用jQuery谢谢

试试jQuery库，这会让它变得简单

$( "span" ).removeClass( "yourClass" );

---

尝试取消如下所示的冒泡事件：

var targets = document.querySelectorAll('.click-element');

    for (i = 0; i < targets.length; i++) {
        targets[i].addEventListener('click', function () {
            var clicked = this;
            if (this.classList.contains("active")) {
                [].forEach.call(targets, function (a) {a.classList['remove']('active');});
            }
            else {
                [].forEach.call(targets, function (a) {a.classList[a == clicked ? 'add' : 'remove']('active');});
            }

        });
    }

for (i = 0; i < targets.length; i++) {
    targets[i].addEventListener('click', function(e) {
        var clicked = this;
        if (this.classList.contains("active")) {
            [].forEach.call(targets, function(a) {
                a.classList['remove']('active');
            });
        }
        else {
            [].forEach.call(targets, function(a) {
                a.classList[a == clicked ? 'add' : 'remove']('active');
            });
        }
        e.stopPropagation();
    });
}

关键点：

目标[i]。addEventListener'click'，函数{。。。 e、 停止播放；…

尝试以下操作：

var targets = document.querySelectorAll('.click-element');
var activeElement; // this should be some global variable

for (i = 0; i < targets.length; i++) {
    targets[i].addEventListener('click', function () {

        if(activeElement){
          activeElement.classList['remove']('active');
        }
        var clicked = this;
        activeElement = this;
        if (this.classList.contains("active")) {
            [].forEach.call(targets, function (a) {a.classList['remove']('active');});
        }
        else {
            [].forEach.call(targets, function (a) {a.classList[a == clicked ? 'add' : 'remove']('active');});
        }

    });
}

---

我认为更好的解决方案是使用事件冒泡。 如果您有一个通用容器：

document.getElementById('#containerId').addEventListener('click', function(evt){
    var element = evt.target;
    if(element.classList.contains('click-element'){ 
        //toggle active
         element.classList[element.classList.contains('active') ? 'add' : 'remove']('active');
    } else{
        //remove the active from all elements
        document.querySelectorAll('.click-element.active').forEach(
            function (clickElement, index) {clickElement.classList[remove]('active')}
        );
    }
});

---

在您的情况下，跨度中没有子元素，但如果有子元素，则需要检查单击的元素是否是跨度的后代。

是否要立即或逐个在所有元素上应用/删除类，即单击将切换类的元素？

document.getElementById('#containerId').addEventListener('click', function(evt){
    var element = evt.target;
    if(element.classList.contains('click-element'){ 
        //toggle active
         element.classList[element.classList.contains('active') ? 'add' : 'remove']('active');
    } else{
        //remove the active from all elements
        document.querySelectorAll('.click-element.active').forEach(
            function (clickElement, index) {clickElement.classList[remove]('active')}
        );
    }
});