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 类的图像都被删除。

有什么想法吗？

- CLiown

---

你的美妙占位符小猫网站没有按照描述工作？！ - Nathan

Answer 1

为什么不先从所有元素中移除活动类呢？

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

- Nathan

Answer 2

这是解决此问题的方案：

$('#thumbselector img').on("click", function(){
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
});

- user3125195

Answer 3

嗨

http://api.jquery.com/toggleClass/

$('#foo').toggleClass(className, addOrRemove);

等同于：

if (addOrRemove) {
    $('#foo').addClass(className);
  }
  else {
    $('#foo').removeClass(className);
  }

- Michel Ayres

Answer 4

这应该可以工作：

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

- RJD22

Answer 5

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

演示在这里：http://jsfiddle.net/fermin/5JAUh/

- Fermin

Answer 6

只需从所有兄弟元素中删除该类：

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

在这里查看它的运行效果：http://jsfiddle.net/kvhWD/

- Simon

Answer 7

你需要使用LIVE而不是CLICK，因为你正在动态添加/删除类。看看我的例子：

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

- mauteri

---

实际上，你可以只使用click，但是你需要将它包装在docready中：$(function() { //code });或者在标记后添加它。 - mauteri