页面加载时的随机图像

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

你不应该全局定义随机数。可能下面的代码会对你有所帮助。

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 2

您的代码有一些错误。你定义 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 3

您的代码似乎有 2 个问题：

您的随机发生器在 .each 循环之外。因此，为什么你所有的图像都得到相同的图像。
所有图像都有 src 属性，即使那些没有 people class。

虽然你几乎做对了。尝试 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 class，并且没有正确设置为图像（只有 3 个）。

Answer 4

x不变。您可以在 $.each() 中使用 setTimeout() 将数组的随机元素推送到没有重复的数组；利用选择器 $(".item img.people") set <img> src with .attr(function) 迭代原始选择器集合中的所有元素

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>

页面加载时的随机图像

Random Images on page load

javascript

random

each

jquery

if-statement