【发布时间】：2016-03-28 10:38:14
【问题描述】：
功能：
品牌图像是随机的，并显示在容器列表中。每个随机品牌形象只需要显示一次。
做了什么：
首先，我创建了一个图像文件数组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"];
$(function() {
//Auto populate into brand container once randomised for each Brand image
for (i = 0; i < $('#list').find('img').length; i++) {
//To Set random Brand
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();
console.log(Brand);
}
});.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>
</div>问题：
此时，随机图像正在显示。但是，显示的某些图像会显示不止一次。
因此，随机图像怎么可能只在<div id ="list"> 中显示一次？
请帮忙。非常感谢您的帮助。
【问题讨论】：
-
附注，确保您的 ID 是唯一的
-
使用适当的数组混洗算法，例如 Fisher-Yates 算法。
标签： javascript jquery arrays sorting random