jQuery - 根据列表中的选定项添加/删除类 [英] jQuery - Add/Remove class based on selected item in list

问题描述

我在HTML中有一个非常基本的列表：

I have a very basic list in 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在点击时向img添加.active类：

Then im using toggleClass to add an .active class to the img when its clicked:

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

但是我希望每个图像都能彼此了解，所以当我选择一个图像时给它.active类 - 如果我然后选择另一个图像我想确保任何以前的.active类图像都删除它。

However I want each of the images to be aware of each other, so when I select one image and give it the .active class - If I then select another image I want to make sure any previous image with the .active class has it removed.

任何想法？

推荐答案

为什么不删除活动类首先是他们所有人？ ：

Why not just remove the active class from all of them first instead? :

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

这篇关于jQuery - 根据列表中的选定项添加/删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！