javascript - 如何更新多张图片的 'src'属性？-6ren

javascript - 如何更新多张图片的 'src'属性？

转载作者：行者123 更新时间：2023-11-28 10:52:38

我有以下来源:

  <body>
    <div class="slideshow_top">
      <img class="slideshow_image" src="img/cycle/putritos.jpg">
    </div>

    <div class="slideshow_mid">
      <img class="slideshow_image" src="img/cycle/stage.jpg">
    </div>

    <div class="slideshow_bot">
      <img class="slideshow_image" src="img/cycle/marketing.jpg">
    </div>
    ...
  </body>

假设我生成了三个新的 src 值，例如:

var src1="img/cycle/newimage1.jpg
var src2="img/cycle/newimage2.jpg
var src3="img/cycle/newimage3.jpg

如何更改现有图像的源值？我不确定，因为我知道图像周围的 div 是唯一命名的，但图像本身的类别是共享的。鉴于此，是否仍然可以使用 Javascript 更新每个源属性？

最佳答案

看起来你的问题的一部分与选择图像有关，只有当它们是 slideshow_top/mid/bot div 元素的子元素时。有几种方法可以做到这一点...

在 jQuery 中，你可以这样做:

$('.slideshow_top img').attr('src',src1);
$('.slideshow_min img').attr('src',src2);
//etc.

这只是一个简单的 Sizzle CSS 样式选择器。如果需要，您还可以使用 jQuery 的 .children() 方法:

$('.slideshow_top').children('img').attr('src',src1);

在普通的旧 JavaScript 中，它有点冗长，但你仍然可以这样做:

var slideShowTop = document.getElementsByClassName('slideshow_top'),
    slideShowTopImage = slideShowTop[0].getElementsByTagName('IMG');

slideShowTopImage[0].setAttribute('src',src1);

//etc.

不过请注意，getElementsByClassName 在 IE 9 以下的版本中不受支持，因此您必须编写自己的小函数，例如，通过标签名称循环遍历所有元素，通过 className 等过滤它们。jQuery 可能是继续这个的方式......

关于javascript - 如何更新多张图片的 'src'属性？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22739346/