Блог

В настоящее время я создаю сайт, на котором они хотели бы, чтобы каждое загружаемое изображение отображало разные изображения. До сих пор я мог настроить их таргетинг и рандомизировать их, но он применяет одно и то же изображение ко всем элементам. Если бы вы могли видеть, где я ошибаюсь, это было бы здорово

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

x не изменяется. Вы можете использовать setTimeout() within $.each() для переноса случайного элемента массива в массив без дубликатов; используйте $(".item img.people") набор селекторов <img> src , с .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>  

Похоже, в вашем коде есть 2 проблемы:

1. Ваш рандомизатор находится вне .each цикла. Следовательно, почему все ваши изображения получают одно и то же изображение.

2. Все изображения получают атрибут src, даже те, у которых нет people класса.

Вы почти все поняли правильно. Попробуйте скрипку, которую я сделал с этими исправлениями, или демонстрацию ниже.

 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).

У вас какая-то ошибка в вашем коде. вы определяете 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]);
    }
});
  

Вы не должны определять случайное число глобально. Возможно, приведенный ниже код поможет вам.

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