功能:
我在 html 正文中设置了 2 个图像标签,以显示数组中的 2 个随机图像。其次,我通过代码行 var Brand = BrandNameArray.splice(random_BrandIndex, 1)[0];
但是,当我运行代码时,我注意到 html 正文中第二个图像标记的第二个图像显示了错误的图像。它显示的图像索引为 +1。
含义:
我有一个 array_Image = [A, B, C, D, E] 并且在我的控制台日志中,据说随机图像返回 [0,3] 的 2 个图像,因此正确地,它应该显示图像[A , D] 在我的 html 正文的图像标签中。然而,显示的图像是[A,E]。尽管以下行为已经发生了很多次,但并不一致。
我可以在这方面获得一些帮助吗?谢谢。
我附上了以下代码供您阅读。
当用户点击显示的随机生成的图像时,将调用以下代码 onclick="selectBrand('2');
,将显示一个弹出图像,该图像也来自附加的另一个数组到 Brand_list.push(random_BrandIndex);
,具体取决于推送到临时存储数组的图像 -> var Brand_List=[];
//Brand Offers
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) {
random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
console.log("random_BrandIndex:" + random_BrandIndex);
//Assign Variable to generate random Brands
//var Brand = BrandNameArray[random_BrandIndex];
console.log("Brand:" + Brand);
var Brand = BrandNameArray.splice(random_BrandIndex, 1)[0];
Brand_list.push(random_BrandIndex);
$(img).attr('src', Brand).show();
});
console.log("Brand_list:" + "[" + Brand_list + "]");
<div id="MainBackground" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=8; top:0px; left:0px; margin:auto;">
<!--Div to show my 2 randomised images-->
<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>
</div>
最佳答案
I have an array_Image = [A, B, C, D, E] and within my console log, it is stated that the randomised image returns 2 images of [0,3], hence rightfully, it should be showing image [A , D] in my image tag of my html body. However, the images that are displayed are [A, E].
考虑一下:
[A, B, C, D, E] Random number : 0,
so splice(0) [A, B, C, D, E] => [B, C, D, E] Output : A (A is on 0th position)
下一步,
[B, C, D, E] Random Number : 3,
so splice(3) [B, C, D, E] => [B, C, D] Output : E (E is now on 3rd position)
这就是为什么图像是[A,E]
而不是[A,D]
。
P.S:当随机数与[0,0]相同时,为什么你没有感到困惑?
The following behaviour has occured quite a number of times even though, it is not consistent.
当
时,它会表现得像这样1st random number < 2nd random number
why(?) :因为上面的解释。
//Brand Offers
var Brand_list = [];
var BrandNameArray = ["A.png", "B.png", "C.png", "D.png", "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);
});
console.log("Brand_list:" + "[" + Brand_list + "]");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="MainBackground" align="center">
<!--Div to show my 2 randomised images-->
<div class="GameWinBrand_Container">
<div id="BrandWinlist" class="GameWinBrand_innerScroll">
<img id="GameBrand_1">
<img id="GameBrand_2">
</div>
</div>
</div>
关于javascript - 数组中的随机图像显示图像标签错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38696957/