Javascript - 隨機圖像foreach用戶

我想爲每個沒有頭像的用戶製作隨機圖像。但問題是隨機圖像只適用於第一個用戶。Javascript - 隨機圖像foreach用戶

我使用gambar1.png作爲第一個默認圖像，然後當頁面刷新時它會變成不同的隨機圖像。

這是我的看法：

<img src="<?php echo base_url()?>image/gambar1.png" class="img-thumbnail" id="defatar"/> user 1 
    <img src="<?php echo base_url()?>image/gambar1.png" class="img-thumbnail" id="defatar"/> user 2

這是JavaScript：

<script type="text/javascript"> 
     var ErrorImages = new Array(); 
     ErrorImages[0] = "<?php echo base_url()?>image/gambar1.png"; 
     ErrorImages[1] = "<?php echo base_url()?>image/gambar2.png"; 
     ErrorImages[2] = "<?php echo base_url()?>image/gambar3.png"; 
     document.getElementById("defatar").src = ErrorImages[Math.floor(Math.random()*ErrorImages.length)]; 
    </script>

隨機圖像工作的用戶1，但用戶2

任何答案不行？

來源

2015-01-12 Andhika R.K.

ID必須只有一個用於頁面.. –

使用循環。設置id爲'defatar1'，'defatar2'...然後在你的選擇器中，像'document.getElementById（「defatar」+ loopindex）' – user3148949

ID必須是獨特的頁面，您不能使用幾個元素一個ID，而不是ID可以使用class，這樣

PHP視圖，

<img src="<?php echo base_url()?>image/gambar1.png" class="img-thumbnail defatar" /> user 1 
<img src="<?php echo base_url()?>image/gambar1.png" class="img-thumbnail defatar" /> user 2

var ErrorImages = []; 

ErrorImages[0] = "image/gambar1.png"; 
ErrorImages[1] = "image/gambar2.png"; 
ErrorImages[2] = "image/gambar3.png"; 

var ErrorImagesLength = ErrorImages.length, 
    images = document.querySelectorAll('.defatar'), 
    len = images.length, 
    i; 

for (i = 0; i < len; i++) { 
    images[i].setAttribute('src', ErrorImages[Math.floor(Math.random()*ErrorImagesLength)]); 
}

Example

來源

2015-01-12 10:11:41

Javascript - 隨機圖像foreach用戶

回答

相關問題