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

Answer 2

柳

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

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

相当于：

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

Answer 3

这应该有效：

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

Answer 4

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

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

Answer 5

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

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

在此处查看此行动：http://jsfiddle.net/kvhWD/

Answer 6

由于您正在动态添加/删除课程，因此您需要使用LIVE而不仅仅是CLICK。看我的例子：

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

Answer 7

以下是此问题的解决方案：

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

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

7 个答案: