Рандомизированные изображения не показаны

Question

Функциональность: Я пытаюсь установить рандомизированную страницу изображения. Следовательно, когда пользователь попадает на страницу, таблица изображений на странице всегда рандомизирована.

То, что я сделал:

Во-первых, я создал массив файлов изображений в качестве var ImageArray=["","","",....]. Во-вторых, я создал рандомизированный метод как var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);, и, наконец, я создал цикл for, который позволит изображению заполнить таблицу, созданную внутри тела html.

Я приложил код для прочтения:

//Brand Array 
 
var BrandNameArray = ["lib/img/PAGE03/Brands/Ads.png", "lib/img/PAGE03/Brands/AEO.png", "lib/img/PAGE03/Brands/AO.png", "lib/img/PAGE03/Brands/Beauty.png", "lib/img/PAGE03/Brands/Be.png", "lib/img/PAGE03/Brands/DS.png", "lib/img/PAGE03/Brands/Cch.png", "lib/img/PAGE03/Brands/Coton.png", "lib/img/PAGE03/Brands/Dwel.png", "lib/img/PAGE03/Brands/esBr.png", "lib/img/PAGE03/Brands/Et.png", "lib/img/PAGE03/Brands/E.png"]; 
 
//To Set random Brand 
 
var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length); 
 
//Assign Variable to generate random Brands 
 
var Brand = BrandNameArray[random_BrandIndex]; 
 

 
$(function() { 
 
    console.log(Brand); 
 
    //Auto populate into brand container once randomised 
 
    for (i = 0; i < Brand.length; i++) { 
 
    $('#Brand_' + (i + 1)).attr('src', Brand[i]); 
 
    $('#Brand_' + (i + 1)).show(); 
 
    } 
 
});

.Container { 
 
    position: absolute; 
 
    top: 300px; 
 
    left: 300px; 
 
    height: 600px; 
 
    width: 1250px; 
 
    overflow-y: scroll; 
 
} 
 
.innerScroll { 
 
    position: relative; 
 
    width: 1250px; 
 
    height: 600px; 
 
    font-size: 25px; 
 
    color: #8d8989 !important; 
 
    overflow: scroll; 
 
}

<div class="Container"> 
 
    <div id="list" class="innerScroll"> 
 
    <!--1st Row--> 
 
    <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');"> 
 
    <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');"> 
 
    <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" onclick="selectBrand('3');"> 
 
    <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" onclick="selectBrand('4');"> 
 

 
    <!--2nd Row--> 
 
    <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');"> 
 
    <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');"> 
 
    <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');"> 
 
    <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');"> 
 

 
    <!--3rd Row--> 
 
    <img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');"> 
 
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');"> 
 
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');"> 
 
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');"> 
 

 
    <!--4th Row--> 
 
    <img id="Brand_09" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');"> 
 
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');"> 
 
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');"> 
 
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">.....(more rows of images)... 
 
    </div>

Выпуск

Из журнала возврата консоли, то только вернуться назад только 1 тавро когда он должен возвращать список брендов. Я хотел бы спросить, что я сделал не так, и как я могу добавить каждое рандомизированное изображение возврата в контейнер в div?

Пожалуйста, помогите.

Answer 1

в вашем коде (var Brand = BrandNameArray[random_BrandIndex];), так что Бренд представляет собой одну строку, а не массив.

var BrandNameArray = ["lib/img/PAGE03/Brands/Ads.png", "lib/img/PAGE03/Brands/AEO.png", "lib/img/PAGE03/Brands/AO.png", "lib/img/PAGE03/Brands/Beauty.png", "lib/img/PAGE03/Brands/Be.png", "lib/img/PAGE03/Brands/DS.png", "lib/img/PAGE03/Brands/Cch.png", "lib/img/PAGE03/Brands/Coton.png", "lib/img/PAGE03/Brands/Dwel.png", "lib/img/PAGE03/Brands/esBr.png", "lib/img/PAGE03/Brands/Et.png", "lib/img/PAGE03/Brands/E.png"]; 
//To Set random Brand 

$(function() { 
    //Auto populate into brand container once randomised 
    for (i = 0; i < $('#list').find('img').length; i++) { 
var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length); 
//Assign Variable to generate random Brands 
var Brand = BrandNameArray[random_BrandIndex]; 
    $('#Brand_' + (i + 1)).attr('src', Brand); 
    $('#Brand_' + (i + 1)).show(); 
    } 
});