Question

我有一组图片标签（大约30个），我需要根据变量的值更改源代码。

如何在不为每个功能编写不同功能的情况下快速轻松地完成此操作？

显然我可以用

之类的东西轻松改变每一个

$('#imagethatneedschanging').attr('src', 'alternateimage.png');

但是，当我这样做的时候，如何在不写相反的情况下为每个图像标记恢复原始的src？

Answer 1

首先，给他们所有的课程，以便您可以将所有图像作为一组参考，而不是单独按ID。

这个功能可以满足你的需要......

function setImageSrc(src) {
    $("img.yourClass").attr("src", function() {
        if (src == "") {
            return $(this).data("original-src");
        }
        else {
            $(this).data("original-src", this.src);
            return src;
        }
    });
}

然后您可以像这样调用它来设置所有图像......

setImageSrc("alternateimage.png");

这将设置图像以显示替代图像，并且还将原始src值存储在每个图像元素上。然后你可以通过调用相同的函数将它们全部恢复为原始版本，但是像这样......

setImageSrc("");

Answer 2

您可以使用jQuery来迭代图像并使用原始图像的数据属性

var original = false;
$( "img" ).each(function( index ) {
   if(!original){
      $(this).data('orig', $(this).data('src'));
      $(this).attr('src', 'alternateimage.png');
   }
   else{
      $(this).attr('src', $(this).data('orig'));
  }
});

https://api.jquery.com/each/

http://api.jquery.com/data/

使用javascript更改一组<img/>标记的图像源（并再次返回）

2 个答案: