在 div 上切换类 = 在另一个 div 上取消切换类答案

【问题标题】：Toggle class on div = Untoggle class on another div在 div 上切换类 = 在另一个 div 上取消切换类
【发布时间】：2013-01-03 13:34:42
【问题描述】：

我有一些在点击时会改变外观的 div（#div1、#div2、#div3），它们使用这个脚本来切换一个类：

$(document).ready(function() {
    $("#parent_div").on('click', '.current_class', function () {
        $(this).toggleClass("new_class");
    });
});

现在我希望 div 不能同时切换，所以它们的工作方式有点像具有相同 "name" 的单选按钮。

示例：想象三个看起来相同的 div（默认类），然后单击其中一个 div（例如 #div1），然后切换一个新类并更改外观。现在你点击另外两个之一，这个也改变外观（切换类），同时当这个改变外观#div1变回默认类。

因此，这三个 div 中只能有一个同时切换新类。

这可能吗？

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

您首先需要从所有 div 中删除该类，然后将其添加到当前的。试试这个：

$("#parent_div").on('click', '.current_class', function () {
    $('#parent_div .new_class').removeClass('new_class'); // remove exisiting
    $(this).addClass("new_class"); // add to current
});

更新

添加了从当前删除类的功能：

$("#parent_div").on('click', '.current_class', function () {
    var $this = $(this);
    if (!$this.hasClass('new_class')) {
        $('#parent_div .new_class').removeClass('new_class');
        $this.addClass("new_class");
    }
    else {
        $this.removeClass("new_class");
    }
});

【讨论】：

这个在添加 doc.ready 部分后效果很好，但是它不可能取消当前的切换（如果不想切换非），可以添加吗？

【解决方案2】：

用途：

$(document).ready(function() {
    $("#parent_div").on('click', '.current_class', function (){
        if($(this).hasClass('.new_class')){
            $(this).removeClass('.new_class');
        }else {
            $('.new_class').removeClass('.new_class');
            $(this).addClass('.new_class');
        }
    });
});

更新：代码现在允许使用 .new_class 类切换当前元素。

【讨论】：

这个效果很好，但是无法取消当前的切换（如果不想切换非），可以添加吗？

【解决方案3】：

这是可能的，但您需要手动重置所有其他 div。

一个例子是：

我有 3 个可用 id 的 div-1、div-2 和 div-3 的 div。我正在使用默认类“默认”和定义类，因此我可以单击它们“可点击”，而我的其他类将被“选中”。

要实现这一点，您需要执行以下操作：

$(document).ready(function()  {
    $('#parent-div').on('click, 'clickable', function() {
        $('.selected').removeClass("selected").addClass("default");
        $(this).addClass("selected");
    })
});

我希望这会有所帮助。我无法检查语法是否完全正确，但我相信这可以按要求完成。

亲切的问候， NDakotaBE

【讨论】：