更改一组<img>用javascript标记

Changing the image source (and back again) of a group of <img> tags with javascript

本文关键字：img javascript 标记 一组      更新时间：2023-09-26

我有一组图像标签(大约30)，我需要根据变量的值改变源

我怎么能快速，轻松地做到这一点，而不是为每个人写一个不同的函数?

显然我可以很容易地用

来改变每一个
$('#imagethatneedschanging').attr('src', 'alternateimage.png');

但是当我这样做的时候，我怎么能恢复到原来的src而不写相反的和每个图像标签?

首先，给它们一个类，这样你就可以将所有的图像作为一个组来引用，而不是通过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("");

可以使用jQuery逐个遍历图像，并为原始图像使用data属性

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/

相关文章：