2

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

这可能吗？

4

3 回答 3

3

您首先需要从所有 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");
    }
});
于 2013-01-03T13:36:14.477 回答
1

利用：

$(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。

于 2013-01-03T13:36:11.623 回答
0

这是可能的，但您需要手动重置所有其他 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

于 2013-01-03T13:43:06.550 回答