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，那么它将添加媒体单击类，如果我再次单击它，它将删除它。但是，我想单击#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 回答