JavaScript和querySelector

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/