1

複数の要素間でクラスを切り替えたい:

<div class='container'>
    <div class='main'>
       <div class='par' id='1'></div>
       <div class='par' id='2'></div>
       <div class='par' id='3'></div>
       <div class='par' id='4'></div>
    </div>
</div>

私はこれを持っています

$('.main').delegate('.par','click',function(){
    $(this).toggleClass('media-clicked');
});

#1 などの要素をクリックすると、media-clicked クラスが追加され、もう一度クリックすると削除されることを理解しています。ただし、#1 をクリックしてから、もう一度クリックせずに別の要素 (#4 など) をクリックすると、他のメディアでクリックされた要素 (#1) が削除されます。

どうすればそんなことをするでしょうか?

ありがとう!

4

2 に答える 2

2
$('.main').on('click', '.par', function () {
    $(this).siblings('.media-clicked').removeClass();
    $(this).toggleClass('media-clicked');
});

http://jsfiddle.net/WPDGY/2/

于 2013-03-02T01:11:34.127 に答える
2

したがって、基本的に、クラスを新しい要素に移動する必要があります。再利用性のために「ラッパー」要素を使用することをお勧めします。この場合、メイン クラスを含む div で十分です。このようにして、削除したいクラスを持つ現在の要素の兄弟を探し、それを削除し、現在の要素に追加することができます。

// you can use .on instead of .delegate if your jquery version is > 1.7
$('.main').delegate('.par','click',function(){
    $(this).sibblings(".media-clicked").removeClass("media-clicked");
    $(this).addClass('media-clicked');
});

これにより、同じ構造を持つ他のブロックを使用しながら、各ブロックで個別の機能を維持できます。

于 2013-03-02T01:12:50.137 に答える