Вы можете произвольно выбрать ячейку col-4
, а затем применить логику только к 2x img
в этой ячейке.
Не изменяя слишком много существующего кода, измените на:
var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
cell.find("img").fadeToggle(1500);
Обновленная скрипка: https://jsfiddle.net/ju0comn2/1/
Из-за природы Math.random()
вы заметите, что он запускает одни и те же изображения в одном и том же порядке - запускает случайное число. Вы также получите то же изображение, заменив его тем же изображением.
Для элементарного исправления для дублированных изображений проверьте, имеет ли какое-либо из видимых изображений тот же src, что и новый src:
var result = randomArray();
var cells = $(".galery .col-4");
var randomId = (Math.floor(Math.random() * cells.length));
var newsrc = result[0];
if ($(".galery img[src='" + newsrc + "']:visible").length > 0) {
changeSrc();
}
else {
var cell = cells.eq(randomId);
cell.find("img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
cell.find("img").fadeToggle(1500);
}
Это может быть обработано с помощью цикла while
, чтобы получать случайные идентификаторы, но если у вас больше изображений, чем панелей, рекурсивный вызов вряд ли будет переполняться стеком.
Обновленная скрипка: https://jsfiddle.net/ju0comn2/2/