由网友(刚好遇见你)分享简介：我有一些的div（＃DIV1，＃DIV2，＃DIV3）上点击这一变化appearence，他们使用这个脚本触发类：I have some divs (#div1, #div2, #div3) that change appearence on click, they toggle a class using thi...

我有一些的div（＃DIV1，＃DIV2，＃DIV3）上点击这一变化appearence，他们使用这个脚本触发类：

I have some divs (#div1, #div2, #div3) that change appearence on click, they toggle a class using this script:

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

现在我想的div是无法切换的同时，让他们的工作有点像一个单选按钮具有相同的名称。

Now I want the the divs to be unable to toggle at the same time, so they work kinda like a radio-button with same "name".

示例：假设3 div的看起来相同（缺省类），然后你点击的div（例如＃DIV1）之一，一个切换的新类和更改appearence。现在，你点击其它两个之一，这其中也改变appearence（拨动类），同时，当这一变化appearence＃DIV1变回默认的类。

Example: Imagine three divs that looks the same (default class), then you click on one of the divs (example #div1) and that one toggles a new class and change appearence. Now you click on one of the other two and this one also change appearence (toggle class), at the same time when this one change appearence #div1 changes back to the default class.

所以只能是这三个，用来切换新类一下子之一股利。

So there can only be one div of those three that toggles the new class at once.

这可能吗？

推荐答案

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

You first need to remove the class from all the divs, and then add it to the current one. Try this:

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

更新

新增的功能，从目前的去除类：

Added functionality to remove class from 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");
    }
});