随机图像正在显示委屈用于图像标签

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张图像，因此正确地说，它应该在我的html body的图像标签中显示图像[A，D]。但是，显示的图像是[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>

Answer 1

我有一个array_Image = [A，B，C，d，E]和我的控制台日志内，它 表明随机化图像返回[0,3]的2个图像，因此 正确地，它应该在我的 html正文的图像标记中显示图像[A，D]。但是，显示的图像是[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 

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

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