javascript - Jquery - 单击时更改 img src，如果单击不同的 img 或 block ，则返回旧的 src

Question

我想在单击时更改图像 src，如果单击不同的图像或 block ，则返回旧的 src

    <div>
     <img src="a" />
     <img src="b" />
     <img src="c" />
     </div>

假设我点击 src="a"或 src="b"的 img，当我点击 src="c"的 img 时，我希望将其更改为 src="d"，改回 src上一个图像到 src="a"或 src="b"处于初始阶段。

 $('img').click(function() {
     Imgsrc = $('img').attr("src");
     $('img.current').removeClass('current').attr("src", eval("Imgsrc"));
     $(this).closest('img').addClass('current');
     $('img.current').attr("src", "d");
 });

它正在将 src="a"的颜色更改为 src="c"。我知道，因为我首先初始化，然后如何先保存它，然后再更改。可能是个愚蠢的问题，但仍然需要帮助。

Answer 1

我建议您使用$('object').data()方法来存储图像中的值。

通过这种方式，您可以将值存储在对象本身中，并且可以轻松地换入和换出信息。

$('img').on('click',function() {
  var tradeoff = 'http://firestarter.firebrandgroup.com/images/flame-logo.gif?b20388';
  /** Reset images to original image **/
  $('img').each(function() {
    var $img = $(this);
    /** get the old original src **/
    var data = $img.data('oldsrc');
    /** only update if there is actually some value there **/
    if(data) {
      $img.attr('src',data);
      }
      
  });
  
  /** current image **/
  var $this = $(this);
  /** current href **/
  var src = $this.attr('src');
  
  /** only store if different from tradeoff value **/
  if(src != tradeoff) {
    /** store in image the old data **/
    $this.data('oldsrc',src);
  }
  /** show the tradeoff **/
  $this.attr('src',tradeoff);
});

img { width:100px;height:60px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.ytimg.com/vi/RTfvXkEXa-k/maxresdefault.jpg"><BR/>
<img src="https://i.ytimg.com/vi/XlUPuj2V6PM/maxresdefault.jpg"><BR/>
<img src="https://i.ytimg.com/vi/Haj9TAFCv5w/maxresdefault.jpg"><BR/>