Question

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

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

假设我点击img与src =“a”或src =“b”我希望它将其更改为src =“d”当我点击img与src =“c”时，更改回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()方法将值存储在图片中。

这样您就可以将值存储在对象本身中，并且可以轻松地交换信息。

＆＃13;

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

＆＃13;

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

＆＃13;

<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/>

＆＃13;

Answer 2

使用html数据属性。

  <div>
     <img src="a" data-source="a"/>
     <img src="b" data-source="b" />
     <img src="c" data-source="c" />
     </div>


function reset_img()
{
    var images = $('img');
    $.each(images, function() {
        var image = $(this);
        if(image.attr("src") != image.attr("data-source"))
             image.attr("src") = image.attr("data-source");
    }
}

$('img').on('click',function(e) {
     reset_img();
     $(this).attr("src", "d");
 });

Jquery - 单击更改img src并返回旧src，如果单击不同的img或块

2 个答案: