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

【问题标题】：Jquery - change img src on click and return old src if clicked on different img or blockJquery - 单击时更改 img src，如果单击不同的 img 或块，则返回旧 src
【发布时间】：2016-02-10 19:59:54
【问题描述】：

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

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

假设我点击带有 src="a" 或 src="b" 的 img 我希望它在点击带有 src="c" 的 img 时将其更改为 src="d"，将上一张图片到 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"。我知道，因为我先初始化，然后如何先保存然后更改。可能是个愚蠢的问题，但仍然需要帮助。

【问题讨论】：

<img src="a"></img> 无效，<img src="a"> 是自闭合标签
@Magicprog.fr 刚刚编辑：]
@Magicprog.fr 然后实际上考虑关闭它<img src="a" />
您可以使用数据属性来存储替代 src 并将它们交换出来
每次点击都必须加载图片...只需在 html 中添加图片并在点击时隐藏/显示图片。

标签： javascript jquery

【解决方案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/>

【讨论】：

【解决方案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");
 });

【讨论】：