切換div上的類=取消切換另一個div上的類

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