如何删除除您单击的课程之外的所有课程？答案

【问题标题】：How to remove all classes except the one you clicked?如何删除除您单击的课程之外的所有课程？
【发布时间】：2014-09-23 19:33:11
【问题描述】：

当我点击一个链接时，这个功能就会启动。它需要删除具有属性 [data-route] 的元素上的所有“.is-active”类。并在与我单击的链接相连的 [data-route] 元素上添加类“.is-active”。

    toggle: function(section){
        var sections = document.querySelectorAll('[data-route]');
        for (i = 0; i < sections.length; i++){
            document.querySelector('[data-route]').classList.remove('is-active');
        }
        document.querySelector(section).classList.add('is-active');
    }

但这不起作用。它不删除类？

查看示例：http://jordypouw.github.io/myFED2/deeltoets1/index.html

附注它必须是原生 JavaScript。

【问题讨论】：

您必须循环所有document.querySelector('[data-route]')...您需要将其存储在一个变量中并循环它们。你也必须使用querySelectorAll

标签： javascript class addclass removeclass toggleclass

【解决方案1】：

toggle: function(section){
    var sections = document.querySelectorAll('[data-route]');
    for (i = 0; i < sections.length; i++){

        sections[i].classList.remove('is-active');

        // querySelectorAll return an array of dom elements, u can access them directly.

    }

    // I suppose in your case that ' section ' variable is the clicked element so :

    section.classList.add('is-active')

   // if not you have to store the dom element from the event, and add the class here.

}

【讨论】：

我们不能在没有循环的情况下这样做吗？就像在 Jquery 中一样，我们这样做了。
@TahirAfridi document.body.querySelectorAll('[data-route]').forEach(i => i.classList.remove('is-active')) 你仍然需要一个循环，但它更整洁

【解决方案2】：

你可以这样做：

for (var item of document.querySelectorAll('[data-route]')) {
    item.classList.remove('is-active');
}

这是 ecmascript6，因此它不适用于旧浏览器。我喜欢它，因为它干净又漂亮。要让它在其他浏览器上工作，您必须将节点集合convert 放入一个真正的数组中，这样您就可以循环它。

【讨论】：

啊，是的。我觉得这个人是对的。忘了有一个循环正在使用。
酷，这是 Samsy 的短版解决方案吗？
是的，他的回答是最直接的方式，但不是最酷的:)

【解决方案3】：

为点击的项目设置一个变量..

jQuery('.clicker-item').on("click", function(){

var clicked = jQuery('.clicker-item').not(jQuery(this));

clicked.removeClass("active")
jQuery(this).toggleClass("active")


});

【讨论】：

【解决方案4】：

toggle: function(section){
    document.querySelectorAll("[data-route]").forEach( e => {

        e.classList.remove("is-active");
    });
    // querySelectorAll return an array of dom elements, u can access them directly.

    // I suppose in your case that ' section ' variable is the clicked element so :

    document.querySelectorAll("[data-route]").forEach( e => {

        e.classList.add("is-active");
    });

   // if not you have to store the dom element from the event, and add the class here.

}

【讨论】：

【解决方案5】：

我觉得，其他答案不够简洁。

toggle: (s) => {

    // Find all other sections and remove the active class:
    document.body.querySelectorAll('[data-route]').forEach(i => i.classList.remove('is-active'))
    
    // Add active to the inputted section:
    s.classList.add('is-active')
}

【讨论】：

【解决方案6】：

不应该是这样吗：

toggle: function(section){
    var sections = document.querySelectorAll('[data-route]');
    for (i = 0; i < sections.length; i++){
        document.querySelector('[data-route]').removeClass('is-active');
    }
    document.querySelector(section).addClass('is-active');
}

编辑：对不起，我应该说 removeClass 和 addClass

【讨论】：

你的回答没有意义，你在循环sections，但不要在循环内做任何事情。
是的，请在您的回答下查看我的回复。我忽略了他正在循环
所以你可以编辑你的答案或删除它。因为留下一个不起作用的答案是没有意义的。