Question

功能

我在我的html主体中设置了2个图像标签，以显示来自数组的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);的另一个数组，具体取决于图像被推送到临时商店阵列 - ＆gt; var Brand_List=[];

＆＃13;

 //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 + "]");

＆＃13;

<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>

＆＃13;

Answer 1

我有一个array_Image = [A，B，C，D，E]并且在我的控制台日志中据说，随机图像返回[0,3]的2个图像理所当然，它应该在我的图像标签中显示图像[A，D] HTML身体。但是，显示的图像是[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：当rando数字相同时，你为什么不感到困惑：[0,0]？

以下行为甚至发生过很多次但是，它并不一致。

当

时，它会表现得像这样

1st random number < 2nd random number

为什么（？）：由于上述解释。

＆＃13;

//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 + "]");

＆＃13;

<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>

＆＃13;

数组中的随机图像显示为图像标记的冤枉

1 个答案: