jquery - jQuery 图像交换 - 重置所有其他图像

Question

下面代码的交换部分工作得很好，但重置部分是我遇到问题的地方。我想要发生的是，当您单击列表中的一张图像时，它们都会恢复为 _off 图像，然后您单击的图像会切换到 _over。

提前致谢。

 // Reset 
 $('.show').attr('src').replace("_over","_off");

 // Swap                        
 if($(this).attr("class") == "show") {
    this.src = this.src.replace("_off","_over");
 } else {
    this.src = this.src.replace("_over","_off");
 }

Answer 1

您可以在绑定图像单击事件处理程序时执行此操作，因为您唯一需要知道的是哪个是当前单击的“img”元素。

$('img').click(function(){ // <-- when img is clicked
     $(this).attr('src','_over'); // <-- change current clicked img            src = _over
     $('img').not(this).attr('src','_off'); // <-- change all other img to     src= _off
});

http://jsfiddle.net/Tkp4E/

Answer 2

更改从返回的值.attr不会更改元素。因此，以下内容之一是什么：

如果类中只有一项show：

$('.show')[0].src.replace("_over","_off");

如果不止一个，

$('.show').each( function() {
  this.src.replace("_over","_off");
});