ページの無作為イメージload

Question

私は現在、ロード中の各イメージで異なるイメージを表示するサイトを構築しています。私は今までこれらをターゲットにしてランダム化できましたが、すべてのアイテムに同じイメージを適用しています。あなたは私が間違っているつもりだ場所を確認することができれば、あなたが世界的に乱数を定義するべきではありません

var description = [ 
    "http://placehold.it/300x300", 
    "http://placehold.it/200x200", 
    "http://placehold.it/100x100" 
]; 

var size = description.length 
var x = Math.floor(size*Math.random()) 

$('.item img').each(function() { 

    if($("img").hasClass("people")) { 
     $(this).attr("src",description[x]); 
    } 
}); 

Answer 1

はあなたのコードと2つの問題があるようですたい：

1. あなたのランダマイザーは.eachループの外です。それで、なぜあなたのすべての画像が同じ画像を得るのですか？

2. peopleクラスがない場合でも、すべての画像にsrc属性が割り当てられます。

あなたはほとんどそれを得ました。 fiddleを試してみましょう。これらの修正、または以下のデモで作成しました。

var description = [ 
 
    "http://placehold.it/300x300", 
 
    "http://placehold.it/200x200", 
 
    "http://placehold.it/100x100" 
 
]; 
 

 
var size = description.length; 
 
$('.item img').each(function() { 
 
    var x = Math.floor(size * Math.random()); //move random inside loop 
 
    if ($(this).hasClass("people")) { //replace "img" with "this" 
 
    $(this).attr("src", description[x]); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="item"> 
 
    <img src="" class="people"> 
 
</div> 
 
<div class="item"> 
 
    <img src="" class="people"> 
 
</div> 
 
<div class="item"> 
 
    <img src=""> 
 
</div> 
 
<div class="item"> 
 
    <img src="" class="people"> 
 
</div>

注が4 itemsはここにあるが、一方はpeopleクラスなしで、正常（わずか3である）画像に設定されていないこと。

Answer 2

素晴らしいことです。以下のコードがあなたを助けます。

var description = [ 
    "http://placehold.it/300x300", 
    "http://placehold.it/200x200", 
    "http://placehold.it/100x100" 
]; 

var size = description.length; 
var x=0; 

$('.item img').each(function() { 
    x = Math.floor(size*Math.random()); 

    if($(this).hasClass("people")) { 
     $(this).attr("src",description[x]); 
    } 
}); 

Answer 3

コードにエラーがあります。あなたはif($("img".定義し、それが最初imgをチェックしていますが、それぞれのimg

var description = [ 
    "http://placehold.it/300x300", 
    "http://placehold.it/200x200", 
    "http://placehold.it/100x100" 
]; 

var size = description.length 

$('.item img').each(function(i,e) { 
    var x = Math.floor(Math.random() * size) 
    if($(this).hasClass("people")) { 
     $(this).attr("src",description[x]); 
    } 
}); 

Answer 4

xは変更されません。 setTimeout()を$.each()の範囲内で使用すると、配列のランダム要素を重複しない配列にプッシュできます。セレクタ$(".item img.people")を利用元セレクタのコレクション内のすべての要素

var description = [ 
 
    "http://placehold.it/300x300", 
 
    "http://placehold.it/200x200", 
 
    "http://placehold.it/100x100" 
 
]; 
 

 
var arr = []; 
 

 
$.each(description, 
 
    function(i, el) { 
 
    setTimeout(function() { 
 
     arr.push(el); 
 
     if (arr.length === description.length) { 
 
     $(".item img.people") 
 
      .attr("src", function(i, src) { 
 
      return arr[i] 
 
      }) 
 
     } 
 
    }, 1 + Math.floor(Math.random() * 5)) 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div class="item"> 
 
    <img class="people" alt=""> 
 
    <img class="people" alt=""> 
 
    <img class="people" alt=""> 
 
</div>