1

Javascript 配列から 3 つのランダムな画像 (繰り返しなし) を取得し、それらを別々の Div 内の画面に印刷するのに苦労しています。

私のJavascript配列は、サーバー上の画像のリンク/場所を含むデータベースによって取り込まれています。

現在、私のページは次のようになっています。

<html>
   <head>
  </head>
   <body>
    <div></div>
    <script>
      var items = [
      {name:'Coch',image:'upload/coch.png'},{name:'Glas',image:'upload/glas.png'},     {name:'Melyn',image:'upload/melyn.png'},{name:'Ci',image:'upload/dog.jpg'},    {name:'Cath',image:'upload/cath.jpg'},{name:'Gwyrdd',image:'upload/gwyrdd.png'},{name:'Un',image:'upload/un.jpg'},{name:'Dau',image:'upload/dau.jpg'},{name:'Tri',image:'upload/tri.jpg'},{name:'Bochdew',image:'upload/bochdew.jpg'},{name:'Piws',image:'upload/piws.png'}      ];
      for (var i = 0; i < items.length; i += 1) {
        document.getElementsByTagName('div')[0].innerHTML += items[i].name + " / " +       items[i].image + "<br />\n";
      } 
    </script>
  </body>
</html>

このコードは、データベースから画像リンクを取得し、それらを javascipt 配列に挿入するだけです。（そして、現時点で画面上のリンクを印刷します）

これを機能させる方法について誰か助けてもらえますか？その配列から 3 つのランダムな画像リンクを取得し (重複なし)、3 つの画像を 3 つの異なる div で画面に表示します。

私は javascipt がまったく得意ではありません。コード例はどれも素晴らしいものです。

返信ありがとうございます。

4

2 に答える 2

1

配列をシャッフルして、最初の 3 つの項目を取得します。ここでは、配列をシャッフルするための優れた関数を見つけることができます: How to randomize (shuffle) a JavaScript array?

于 2013-02-24T22:23:00.250 に答える
0

画像ソースへのリンクが、画像が表示されるページに対して正しいと仮定すると、これでうまくいくはずです。

var list = document.getElementsByTagName('div')[0];
for(i = 0; i < 3; i++) {
  // Choose a random item and remove it from the array
  var item = items.splice(Math.floor(Math.random() * items.length), 1)[0];

  // Create the image element and set its src attribute
  var image = document.createElement('img');
  image.src = item.image;

  // Add it to your container element
  list.appendChild(image);
}

これにより「items」配列が変更されることに注意してください。後で必要になった場合は、最初に配列をコピーするか、ロジックを微調整する必要があります。

JSFiddle: http://jsfiddle.net/ynhCN/1/

于 2013-02-24T22:23:22.400 に答える