Question

我想为每个没有头像的用户制作随机图片。但问题是随机图像只适用于第一个用户。

我使用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.

任何答案？

Answer 1

ID对于页面必须是唯一的，您不能将ID用于多个元素。而是ID您可以使用class，就像这样< / p>

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

JS

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

Javascript - 随机图像foreach用户

1 个答案: