javascript - 数组中的随机图像显示图像标签错误

标签 javascript jquery html arrays random

功能:

我在 html 正文中设置了 2 个图像标签,以显示数组中的 2 个随机图像。其次,我通过代码行 var Brand = BrandNameArray.splice(random_BrandIndex, 1)[0];

确保显示的 2 个随机图像不会重复。

但是,当我运行代码时,我注意到 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/

相关文章:

javascript - 变量返回未定义,即使在 typescript 的异步函数中分配

javascript - jQuery resizable() 和多个 alsoResizes?

javascript - 在 jQuery 中循环 JSON

选项卡式内容之间的 jQuery 链接

jquery - bootstrap 3 在它们的 div 中对齐元素

javascript - 保留 HTTP 重定向之间的 URL 哈希

javascript - VueJS 根据 watch 中的键从对象数组中获取唯一值

javascript - 在 Angular 8 中单击时在 NgOninit 中触发事件

javascript - 滚动时添加不透明度类,但返回顶部时删除

html - 具有不同 <li> 高度的内联导航中的 100% 高度链接