Question

这看起来似乎是一个非常简单的问题，但我在尝试使其工作时遇到了很多麻烦。

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

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

我想在单独点击一个类（＆＃34; active＆＃34;）时打开/关闭每个类，这也应该从所有其他类中删除该类。

为此，我的功能如下：

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

        });
    }

但我正在尝试做的是，当文档中点击其他内容时删除该类：

document.addEventListener('click', function () {
     document.querySelector('.click-element.active').classList.remove("active");
});

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

没有jQuery谢谢

Answer 1

尝试取消像这样冒泡的事件：

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

键：

targets [i] .addEventListener（＆＃39;点击n＃39;，功能（ e ）{... 的 e.stopPropagation（）; ...

Answer 2

试试这个：

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

    });
}

Answer 3

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

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

在你的情况下，你没有跨越的子元素，但如果你需要检查被点击的元素是否是跨度的后代。

Answer 4

尝试使jQuery库轻松实现

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

http://api.jquery.com/removeclass/

删除课程，点击其他任何内容

4 个答案: