1

我有这个 HTML：

<div id="allSteps">
  <h3>Intermediate steps</h3>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image" ></span>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image"></span>
  <span class="staticStep">→ <img src="" alt="intermediate step" class="image"></span>
</div>

在 javaScript 中，如何访问每个图像的 .src？

我尝试了以下方法，但它给了我一个错误： 

document.querySelector(".staticStep img").src[0] = images[num][0];
document.querySelector(".staticStep img").src[1] = images[num][1];
document.querySelector(".staticStep img").src[2] = images[num][2];

我也尝试了以下方法，但它给了我一个错误： 

document.querySelector(".staticStep img")[0].src = images[num][0];
document.querySelector(".staticStep img")[1].src = images[num][1];
document.querySelector(".staticStep img")[2].src = images[num][2];

我究竟做错了什么？

4

4 回答 4

5

尝试使用document.querySelectorAllwhich 返回所有可能的结果，而不仅仅是第一个。你得到的错误 ( Uncaught TypeError: Cannot set property 'src' of undefined) 是因为querySelector只返回找到的第一个元素，而不是数组（并且元素不能像数组一样被访问）。

querySelectorjQuery（ and的灵感querySelectorAll）总是允许你像数组一样访问（$('.staticStep img')[0]works），所以这可能是你困惑的根源。

快速 JSFiddle 示例：http: //jsfiddle.net/j8ZUJ/1/

于 2013-10-24T19:23:26.587 回答
0

试试这个来返回所有的 src：

map = Function.prototype.call.bind([].map);
map(document.querySelectorAll(".image"), function(o){
    return o.src;
});

或设置 src 只是

o.src="whatever";

这是小提琴。

查找MDN以了解map.

于 2013-10-24T19:31:03.270 回答
0

document.querySelector 返回文档中的第一个元素，因此返回错误。您可能想尝试：document.querySelectorAll

var elements = document.querySelectorAll(".staticStep img");

elements[0].src  =.....
elements[1].src  =.....
elements[2].src  =.....

或者你可以改用 jQuery。

于 2013-10-24T19:29:47.840 回答
-1

试试这个代码

document.querySelector('.staticStep :nth-child(i)').src = images[num][i];

where i = 0,1,2,--- ,n.
于 2018-04-18T12:07:50.793 回答