【发布时间】：2016-08-03 19:55:30
【问题描述】：
我创建了一个随机图像数组，2 个随机生成的图像将显示在我的 HTML 正文中创建的 2 个图像标签中。每个随机图像只会显示一次。
问题：
但是，我现在面临一个障碍。我试图将数组中的单个元素随机限制为最多 n 次。
意思：
Array_A = [A, B, C, D, E]
我已经随机化了Array_A，随机生成的图像将显示在我的 HTML 正文中的两个<img> 中。因此，当我执行console.log 时，将显示来自Array_A 的两个元素。
但是，我正在考虑限制例如：Array_A 中的元素 C 显示 5 次，这意味着 index = 2 的随机计数仅为 5，如果计数超过 5，则随机再次调用方法以获取另一个随机元素。
我已经在网上搜索了任何参考资料，但没有找到任何参考资料。
var Brand_list = [];
var BrandNameArray = ["lib/img/Brands/A.png", "lib/img/Brands/B.png", "lib/img/Brands/C.png", "lib/img/Brands/D.png", "lib/img/Brands/E.png"];
//Randomised Brand Offer
//Auto populate into brand container once randomised
$('#BrandWinlist > img').each(function(i, img) {
var flag = false;
do {
random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
if (Brand_list.indexOf(random_BrandIndex) == -1) {
flag = true;
Brand_list.push(random_BrandIndex);
console.log("random_BrandIndex:" + random_BrandIndex);
var Brand = BrandNameArray[random_BrandIndex];
$(img).attr('src', Brand).attr("alt", Brand).show();
}
} while (!flag);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="GameWinBrand_Container">
<div id="BrandWinlist" class="GameWinBrand_innerScroll">
<img id="GameBrand_1" style="width:230px; height:230px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
<img id="GameBrand_2" style="width:230px; height:230px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
</div>
</div>因此，有什么方法可以限制随机元素显示指定的次数？
【问题讨论】：
-
“重新显示”图像时是否会刷新页面/重新加载文档？ IE。这是需要用 cookie/localstorage 存储的东西吗？
-
@haxxxton，不，页面不会刷新/重新显示图像时重新加载文档，它必须显示下一个可用的随机图像。我认为需要跟踪计数。
-
如果显示计数达到 5，则从数组 (
images.splice(i,1)) 中删除该图像并继续正常的随机图像选择操作。 -
@Redu 你有例子吗？我会假设“i”是元素的名称？如果是这样，如何引用数组中元素的名称？
-
@Luke
i是要从图像数组中删除的图像元素的索引。一旦我有空，我将在今天晚些时候发布一个答案......但就目前而言，我可以说你可以在图像数组项中保留一个displayCount属性。每个项目都可以是一个对象来保存displayCount和image属性。
标签： javascript jquery html arrays