jquery-ui - onclick 使用 jquery 更改图像源

Question

当我单击图像时，它会更改为备用版本 ( data-other-src)。

当我单击图像时，我还想将所有其他图像重置为它们的src. 我怎样才能做到这一点？

到目前为止，这是我的代码：

<script>
$(".imageOnOff").live('click', function () {
$(this).attr({src: $(this).attr('data-other-src'),'data-other-src': $(this).attr('src') 
})
   });
 </script>

 <img class="imageOnOff" data-other-src="images/color/1.png" src="images/color/1-1.png"      width="16" height="16">
 <img class="imageOnOff" data-other-src="images/color/2-2.png" src="images/color/2.png"   width="16" height="16">
 <img class="imageOnOff" data-other-src="images/color/3-3.png" src="images/color/3.png" width="16" height="16">
 <img class="imageOnOff" data-other-src="images/color/4-4.png" src="images/color/4.png" width="16" height="16"></a>

Answer 1

与其将 data-other-src 更改为 src，不如存储原始 src ：

$(".imageOnOff").live('click', function () {
  $(".imageOnOff[original-src]").each(function(){
       this.src = $(this).attr('original-src');
       $(this).removeAttr('original-src');
  });
  $(this).attr('original-src', this.src);
  this.src = $(this).data('other-src');
})​

示范