Question

我有这个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];

我做错了什么？

Answer 1

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

jQuery（querySelector和querySelectorAll的灵感总是允许您像数组一样访问（$('.staticStep img')[0]工作），所以这可能是你的地方困惑源于。

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

Answer 2

document.querySelector返回文档中的 first element ，从而导致错误。你可能会尝试： document.querySelectorAll

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

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

或者你可以改用jQuery。

Answer 3

尝试此操作返回所有src：

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

或仅使用

设置src

o.src="whatever";

这是Fiddle。

请MDN了解map的兼容性。

Answer 4

试试此代码

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

where i = 0,1,2,--- ,n.

JavaScript和querySelector

4 个答案: