Question

<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">

img.active {
    border: 5px solid black;
}

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

https://jsfiddle.net/ChilledMonkeyBrain/sLv8gvy9/

对拥有JQ基础知识的任何人都很容易。我以前做过这个，但我不记得怎么做了。已经很久了，所以需要寻求帮助。

很简单，单击图像会给它一个边框。当您单击下一个图像时，它应该从上一个图像中删除边框，并将其添加到当前图像。这又叫什么？！

Answer 1

我会removeClass从所有人，然后addClass到当前：

$('img').removeClass('active');
$(this).addClass('active');

根据具体情况，可能需要更具体情境的内容，例如：

$(this).siblings('img').removeClass('active').end().addClass('active');

如果其中包含大量数据，并且您希望全部避免使用removeClass，则可以将删除选择器限制为img.active。

Answer 2

您只需要使用 removeClass() 删除课程，也可以使用 not() 来避免点击元素，否则切换将无法正常工作

$(function() {
  var $img = $('img').click(function() {
    $img.not(this).removeClass('active');
    // removing `active` class from images except clicked
    $(this).toggleClass('active');
    // toggling class `active` of clicked image
  });
});

img.active {
  border: 5px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">

您也可以 siblings() 选择其兄弟姐妹

$(function() {
  var $img = $('img').click(function() {
    $(this).toggleClass('active')
      // toglling active class of clicked image
      .siblings('img')
      // selecting siblings image        
      .removeClass('active');
    // removing class of them
  });
});

img.active {
  border: 5px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">

Answer 3

您可以使用.siblings()和.end()来恢复原始设置的匹配元素（即this）...

＆＃13;

$(function() {
    $('img').on('click', function() {
       $(this).siblings().removeClass('active').end().toggleClass('active');
    });
});

＆＃13;

img.active {
    border: 5px solid black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">
<img src="http://www.fillmurray.com/80/80">

＆＃13;

Jquery在单击时将类添加到元素，从上一个项中删除相同的类。

3 个答案: