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.querySelectorAllの結果を返す whichを使用してみてください。取得しているエラー ( ) は、配列ではなく、最初に見つかった要素のみを返すためです (また、配列のように要素にアクセスすることはできません)。Uncaught TypeError: Cannot set property 'src' of undefinedquerySelector

jQuery ( と のインスピレーションquerySelector)querySelectorAllは常に配列のようにアクセスできるようにする ($('.staticStep img')[0]動作) ため、おそらく混乱の原因はここにあります。

簡単な 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 に答える