JavaScript和querySelector [英] JavaScript and querySelector

问题描述

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

In javaScript, how do I access the .src for each image?

我尝试了以下操作，但它给了我一个错误：

I tried the following but it gives me an error:

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];

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

I also tried the following but it gives me a an error:

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];

我在做什么错了？

推荐答案

尝试使用 document.querySelectorAll 会返回所有可能结果的 all ，而不仅仅是第一个。您收到的错误（未捕获的TypeError：无法设置未定义的属性'src'）是因为 querySelector 仅返回找到的第一个元素，不是数组（元素不能像数组一样访问。）

Try using document.querySelectorAll which returns all of the possible results instead of just the first one. The error you're getting (Uncaught TypeError: Cannot set property 'src' of undefined) is because querySelector only returns the first element found, not an array (and elements can't be accessed like arrays).

jQuery（ querySelector 和 querySelectorAll ）始终允许您像数组一样进行访问（ $（'。staticStep img'） [0] 起作用），所以这可能是您混淆的地方。

jQuery (the inspiration for querySelector and querySelectorAll) always allows you to access like an array ($('.staticStep img')[0] works), so this is probably where your confusion stems from.

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

Quick JSFiddle example: http://jsfiddle.net/j8ZUJ/1/

这篇关于JavaScript和querySelector的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！