Question

我有以下来源：

  <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更新每个源属性？

Answer 1

尝试

.each( function(index, Element) )

迭代jQuery对象，为每个匹配的元素执行一个函数。

//create array of images 
var arrSrc = ['img/cycle/newimage1.jpg','mg/cycle/newimage2.jpg','img/cycle/newimage3.jpg'];
$('.slideshow_bot .slideshow_image').each(function(i, el){ //to loop through images 
    el.prop('src',arrSrc[i]); //set image here
});

.prop( propertyName, value )

Answer 2

看起来您的问题的一部分只有在他们是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.

请注意，在小于9的IE版本中不支持getElementsByClassName，因此您必须编写自己的小函数，比如按标记名称循环遍历所有元素并按className等过滤它们.jQuery可能是继续这个... ...

Answer 3

您可以执行以下操作：

var new_images = $.map([1,2,3], function(x) { return "newimage" + x + ".jpg"; })
$("img").each(function(i, x) { x.src = new_images[i]; })

Answer 4

var src_array=["img/cycle/newimage1.jpg","img/cycle/newimage2.jpg","img/cycle/newimage3.jpg"]

$(".slideshow_image").each(function(index){
$(this).attr("src",src_array[index])
})

如何更新多个图像的'src'属性？

4 个答案: