Question

我有一些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可以同时切换新类。

这可能吗？

Answer 1

首先需要从所有div中删除该类，然后将其添加到当前的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");
    }
});

Answer 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切换当前元素。

Answer 3

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

一个例子是：

我有3个div可用，id为div-1，div-2和div-3。我正在使用默认类'default'和一个定义类，所以我可以点击它们'clickable'，我的另一个类将被'选中'。

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

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

我希望这会有所帮助。我没有办法检查语法是否完全正确，但我相信这可以完成所需的工作。

亲切的问候， NDakotaBE

在另一个div上的div = Untoggle类上切换类

3 个答案: