0

ループ内にいくつかの div があり、クリックされた内容に応じてクラスを変更したいと考えています。以下のコードを参照してください。

私のHTML：

<div class="Active"></div>
<div class="inactive"></div>
<div class="inactive"></div>

私のJquery：

$(document).ready(function()
{
    $('div.inactive').on('click',function()
    {
        //run some codes
        $(this)
            .removeClass('inactive')
            .addClass('Active')
            .closest('div')
            .find('.Active')
            .removeClass('Active')
            .addClass('inactive');
    });
});

アクティブなクラスを持つ div は、表示されている現在の選択です。これはクリックできません。非アクティブなクラスを含む div は、クリック可能なオプションです。ユーザーが非アクティブな div をクリックすると、その div のクラスがアクティブに変更され (新しい選択が表示されます)、アクティブなクラスを持つ前の div が非アクティブに変更され、クリック可能なオプションになります。CSSコードは関係ないので配置しませんでした。クリックしたオプションに応じてクラスを切り替えるだけです。

誰かが私のコードを見て、どこで失敗しているか教えてもらえますか?

4

3 に答える 3

0 
$(document).ready(function() {
    $(document).on('click', 'div.inactive', function() {
        //run some codes
        $('.Active').removeClass('Active').addClass('inactive');
        $(this).removeClass('inactive').addClass('Active');
    });
});

ここにあります：http://jsfiddle.net/ZgYyP/

于 2013-03-14T02:38:00.127 に答える
0

メソッドに.渡されるクラス名が欠落しており、最も近い親要素も選択します。クリックした要素からもクラスを削除しています。findclosestActive

$('div.inactive').on('click', function(){
    $(this).removeClass('inactive')
           .addClass('Active')
           .siblings('div')
           .removeClass('Active')
           .addClass('inactive');
    });
});

イベント ハンドラーは、クラス名ではなく、選択した要素にバインドされることに注意してください。クラス名を変更すると、クリックした要素のクラス名に関係なく、ハンドラーが実行されます。代わりにイベント委任を使用できます。

$('#aParentElement').on('click', '.Active', function(){
   // Click handler for the Active element
})

$('#aParentElement').on('click', '.inactive', function(){
   // Click handler for the inActive elements
   $(this).removeClass('inactive')
           .addClass('Active')
           .siblings('div')
           .removeClass('Active')
           .addClass('inactive');
})
于 2013-03-14T02:38:06.750 に答える
0

ワーキングデモ

他の回答はこの点を見逃しています：「ユーザーが非アクティブなdivをクリックすると、そのdivのクラスがアクティブに変更され、アクティブなクラスを持つ前のdivが非アクティブに変更され、クリック可能なオプションになります」

クラス名でクリックできるかどうかを制御しようとしていますが、問題は、クリックをバインドする要素であるdiv.inactiveが、そのクラスが削除されたときにそれらのバインドをドロップしないため、確認する必要があることですクリックされるたびにこれを行い、イベントをアクティブなものにもバインドします。

$('div.inactive, div.Active').on('click',function(){
    if ($(this).hasClass('inactive')){
        //run some codes
        $(this).siblings().andSelf().toggleClass('Active inactive');
    }
});
于 2013-03-14T02:38:18.527 に答える