Javascript 切换div上的类=不切换另一个div上的类_Javascript_Jquery_Ajax

Javascript 切换div上的类=不切换另一个div上的类

javascript jquery ajax

Javascript 切换div上的类=不切换另一个div上的类,javascript,jquery,ajax,Javascript,Jquery,Ajax,我有一些div（#div1、#div2、#div3）在单击时更改外观，它们使用以下脚本切换类： $(document).ready(function() { $("#parent_div").on('click', '.current_class', function () { $(this).toggleClass("new_class"); }); }); 现在我希望div不能同时切换，所以它们的工作方式有点像一个单选按钮，具有相同的“name” 示例：想象

我有一些div（#div1、#div2、#div3）在单击时更改外观，它们使用以下脚本切换类：

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

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

“name”

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

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

这可能吗？

使用：

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

已更新：代码现在允许使用类切换当前元素。新建\u类

使用：

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

已更新：代码现在允许使用class切换当前元素。新建class首先需要从所有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");
    }
});

首先需要从所有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");
    }
});

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

例如：

我有3个div，id为div-1、div-2和div-3。我正在使用一个默认类“default”和一个定义类，这样我就可以单击它们“clickable”，而我的另一个类将是“selected”

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

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

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

亲切问候,，

NDakotaBE