CODEWITHSUNDEEP
javascriptjqueryif-statementrandomeach
BA1995
BA1995

Reputation: 415

Random Images on page load

I am currently building a site whereby they would like each image on load to display different images. I have so far been able to target these and randomise them but it is applying the same image to all of the items. If you could see where I'm going wrong it would be great

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]);
    }
});

Upvotes: 1

Views: 3332

Answers (4)

guest271314
guest271314

Reputation: 1

x does not change. You can use setTimeout() within $.each() to push random element of array to an array without duplicates; utilize selector $(".item img.people") set <img> src with .attr(function) which iterates all elements in collection of original selector

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>

Upvotes: 3

Power Star
Power Star

Reputation: 1894

You should not define random number globally. May be below code will help you.

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]);
   }
});

Upvotes: 0

Chris
Chris

Reputation: 59491

There seems to be 2 problems with your code:

  1. Your randomizer is outside the .each loop. Hence why all your images get the same image.

  2. All images get the src attribute, even those without the people class.

You nearly got it right though. Try a fiddle I made with these corrections, or the demo below.

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>

Note that there are 4 items here, but one is without the people class and correctly isn't set to an image (only 3 are).

Upvotes: 1

P. Frank
P. Frank

Reputation: 5745

You have some error in your code. you define if($("img". and that check the first img but you want each 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]);
    }
});

Upvotes: 0

Related Questions