2

クリックすると外観を変更するいくつかのdiv（＃div1、＃div2、＃div3）があり、次のスクリプトを使用してクラスを切り替えます。

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

今、私はdivが同時にトグルできないようにしたいので、それらは同じのラジオボタンのように機能します"name"。

例：同じように見える3つのdiv（デフォルトのクラス）を想像してください。次に、divの1つ（例＃div1）をクリックすると、その1つが新しいクラスを切り替えて表示を変更します。ここで、他の2つのうちのいずれかをクリックすると、これも外観を変更します（クラスを切り替えます）。同時に、この1つが外観を変更すると、＃div1がデフォルトのクラスに戻ります。

したがって、新しいクラスを一度に切り替えるdivは3つのうち1つだけです。

これは可能ですか？

4

3 に答える 3

3

最初にすべての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");
    }
});
于 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を手動でリセットする必要があります。

例は次のとおりです。

IDがdiv-1、div-2、div-3の3つのdivを使用できます。デフォルトのクラス「default」と定義クラスを使用しているので、「クリック可能」をクリックできます。他のクラスは「選択済み」になります。

これを実装するには、次のことを行う必要があります。

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

これがお役に立てば幸いです。構文が正確に正しいかどうかを確認することはできませんでしたが、これで必要に応じて機能すると思います。

よろしくお願いいたします。NDakotaBE

于 2013-01-03T13:43:06.550 に答える