javascript - Javascript 配列と for ループ

Question

それで、私のページに印刷したい写真が20枚ほどあります。画像を配列に配置する必要があると思います.1つのFORループだけで、すべての画像をまったく同じページに印刷できます. どうすればこれを達成できますか？私は JavaScript の初心者です。これらの画像を 1 つの配列に配置し、各画像の src を取得して 1 つずつ書き出す方法さえわかりません。

Answer 1

W3C のチュートリアルをチェックしてください。;)

完全な JavaScript チュートリアル: http://www.w3schools.com/js/
for ループ: http://www.w3schools.com/js/js_loop_for.asp
配列: http://www.w3schools.com/js/js_obj_array。 asp

Answer 2

まず第一に、このタスクに PHP を使用することを検討するか、画像が変化せず動的でない場合は手動で行うことをお勧めします。これに JavaScript を使用すると、JavaScript を無効にしているすべてのユーザーに大きな不利益をもたらします。彼らは画像を見ません！ただし、そうする必要がある場合は、次のようにします。

var images = ['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg', 'img5.jpg'];

for(var i = 0; i < images.length; i++) {
    var img = document.createElement("img");
    img.setAttribute('src', images[i]);
    img.setAttribute('alt', '');
    document.body.appendChild(img);
}

Answer 3

次のようなものを試すことができます：

function E(e){
  return document.getElementById(e);
}
var imgs = ['img1.jpg', 'img2.png', 'img3.jpg', 'img4.jpg', 'img5.png', 'img6.jpg', 'img7.jpg', 'img8.png', 'img9.jpg', 'img10.jpg', 'img11.png', 'img12.jpg', 'img13.jpg', 'img14.png', 'img15.jpg', 'img16.jpg', 'img17.png', 'img18.jpg', 'img19.jpg', 'img20.png'];
var alt = [/*alternative info here like imgs*/];
var ttl = [/*titles here like imgs*/];
var output = '';
for(var i in imgs){
  output += "<img src='"+imgs[i]+"' alt='"+alt[i]+"' title='"+ttl[i]+"' />";
}
E('idWhereYouWantImgs').innerHTML = output;

私は使用するのが好き.innerHTMLです。これは for in ループです。このタイプのループは、このような状況で使用できます。これは、配列が数値インデックスを持つオブジェクトであるためです。IE 8 以前では、for in ループ.getElementsByName()または配列を返す必要がある Element メソッドを使用しないでください。

altおよびttlArrays は、Array と同じ長さでなければならないことに注意してくださいimgs。