Question

我想在多个元素之间切换类：

<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）。

我该怎么做？

谢谢！

Answer 1

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

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

Answer 2

所以基本上你想将类移动到一个新元素。我建议使用“包装”元素来重用。在这种情况下，带有主类的div就足够了，这样你就可以查找当前元素的任何sibbling，它们包含你要删除的类，删除它，然后将它添加到当前元素中，如下所示：

// 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');
});

这允许您使用具有相同结构的其他块，并且仍然在每个块上保持功能分开。

多个类之间的jQuery toggleClass（）

2 个答案: