0

現在、私はこのスニペットを使用しています:

$('.element-block').click(function(){
    $(this).siblings(".key-element").toggle();

    $('.background-area').removeClass("active_bg");
    $(this).parent('.background-area').addClass("active_bg");
});

DIV要素のリストがあります。このブロックでは、 をクリックする.element-blockと、jQuery関数toggle()が必要な領域を表示し、もう一度クリックすると、それを非表示に切り替え、この領域に背景色を追加しています。

たとえば、これはうまく機能しています。Aをクリックすると、.block-elementデータが表示され、背景色が変更されます。次に、Bをクリックします.block-element-データが表示され、背景色が変更されます。涼しい。

しかし、A - データをクリック.block-elementすると背景色が変更され、もう一度クリックすると A .block-element- データは非表示になりますが、背景色は変更されません。

この問題を解決するにはどうすればよいですか?

4

1 に答える 1

1

これは、常にクラスを追加しているためです。削除するだけにするか、追加するかを事前に確認できます。

var $active_bg = $('.background-area.active_bg').removeClass("active_bg");
var $bg = $(this).parent('.background-area');

// Only add the class if the current background didn't have the class
if ($bg[0] !== $active_bg[0]) {
    $bg.addClass("active_bg");
}

上記のコードでは、1つの.background-area要素のみを「アクティブ」にすることができます。複数存在する可能性がある場合は、コードを次のように簡略化できます。

$(this).parent('.background-area').toggleClass("active_bg");
于 2013-02-21T13:14:15.140 に答える