jQuery - 根据列表中选定的项目添加/删除类

Question

我有一个非常基本的 HTML 列表:

<ul id="thumbselector">
    <li><img src="http://placekitten.com/80/80"/></li>
    <li><img src="http://placekitten.com/81/81"/></li>
    <li><img src="http://placekitten.com/g/80/80"/></li>
    <li><img src="http://placekitten.com/g/81/81"/></li>
    <li><img src="http://placekitten.com/g/82/82"/></li>
    <li><img src="http://placekitten.com/g/81/82"/></li>
    <li><img src="http://placekitten.com/80/80"/></li>
    <li><img src="http://placekitten.com/81/81"/></li>
    <li><img src="http://placekitten.com/g/80/80"/></li>
    <li><img src="http://placekitten.com/g/81/81"/></li>
    <li><img src="http://placekitten.com/g/82/82"/></li>
    <li><img src="http://placekitten.com/g/81/82"/></li>                            
</ul>

然后我使用toggleClass在单击时将.active类添加到img中:

$('#thumbselector img').click(function() {
  $(this).toggleClass('active');
}); 

但是，我希望每个图像都能相互了解，因此当我选择一个图像并为其指定 .active 类时 - 如果我随后选择另一张图像，我想确保之前的任何图像都具有 .active 类已将其删除。

有什么想法吗？

Answer 1

为什么不先从所有类中删除事件类呢？ :

$('#thumbselector img').click(function() {
  $('#thumbselector img').removeClass('active');    
  $(this).addClass('active');
});