jQuery 在多个类之间切换Class()

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，那么它将添加类 media-clicked，如果我再次单击它，它将删除它。但是，我想单击#1，然后不再单击它，单击另一个元素(例如#4)，它将删除其他点击的媒体(#1)。

我该如何做这样的事情？

谢谢!

Answer 1

所以本质上你想将类移动到一个新元素。我建议使用“包装器”元素来实现可重用性。在这种情况下，带有主类的 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');
});

这允许您使用具有相同结构的其他 block ，并且仍然在每个 block 上维护单独的功能。