无法理解JavaScript代码

Question

我发现一些代码，想了解它是如何工作的，能有人来我解释一下这部分

if (alreadyChoosen.indexOf("," + rand + ",") < 0) { 
      alreadyChoosen += rand + ","; 
      elements.eq(rand).show(); 
      ++i; 
     } 

代码

呢？

$(document).ready(function() { 
 
    $(".champ").hide(); 
 

 
    var elements = $(".champ"); 
 
    var elementCount = elements.size(); 
 
    var elementsToShow = 4; 
 
    var alreadyChoosen = ","; 
 
    var i = 0; 
 
    while (i < elementsToShow) { 
 
     var rand = Math.floor(Math.random() * elementCount); 
 
     if (alreadyChoosen.indexOf("," + rand + ",") < 0) { 
 
      alreadyChoosen += rand + ","; 
 
      elements.eq(rand).show(); 
 
      ++i; 
 
     } 
 
    } 
 
});

div.champ { 
 
    display: none; 
 
    float: left; 
 
    color: red; 
 
} 
 
p { 
 
    visibility:hidden; 
 
} 
 
.champ:hover p { 
 
    visibility:visible; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/251-Celebi-icon.png"> 
 
    <p>Celebi, the 251</p> 
 
</div> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/151-Mew-icon.png"> 
 
    <p>Mew, the 151</p> 
 
</div> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/003-Venusaur-icon.png"> 
 
    <p>Venasaur, the 3</p> 
 
</div> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/133-Eevee-icon.png"> 
 
    <p>Eevee, the unique</p> 
 
</div> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/006-Charizard-icon.png"> 
 
    <p>Charizard, the 6</p> 
 
</div> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/025-Pikachu-icon.png"> 
 
    <p>Pikachu, the 25</p> 
 
</div> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/009-Blastoise-icon.png"> 
 
    <p>Blastoise, the 9</p> 
 
</div> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/065-Alakazam-icon.png"> 
 
    <p>Alakazam, the 65</p> 
 
</div> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/026-Raichu-icon.png"> 
 
    <p>raichu, the 26</p> 
 
</div> 
 
<div class="champ"> 
 
    <img src="http://icons.iconarchive.com/icons/hektakun/pokemon/72/249-Lugia-icon.png"> 
 
    <p>ho-oh, the 249</p> 
 
</div>

Answer 1

$(document).ready(function() { 
//As soon as DOM is ready it is jQuery Syntax 
$(".champ").hide(); // Hide all elements with class="champ" 

var elements = $(".champ"); // Get All elements with class="champ" 
var elementCount = elements.size(); // Store count of elements, you can also use .length instead of .size() 
var elementsToShow = 4; // No. of elements to be shown 
var alreadyChoosen = ","; // Just a String 
var i = 0; //loop variable 
while (i < elementsToShow) { // Loop through all 4 elements 
    var rand = Math.floor(Math.random() * elementCount); // Generate a random number between 0-4 
    if (alreadyChoosen.indexOf("," + rand + ",") < 0) { // check if that element was already chosen? '.indexOf()' returns -1 if no match found 
     alreadyChoosen += rand + ","; // if not append it to that string 
     elements.eq(rand).show(); // From collection of elements show only that particular element. '.eq()' is jQuery function 
     ++i; // Increment loop variable 
    } 
} 
}); 

查看关于详细信息的评论。希望能帮助到你。

了解更多详情：

.size()

.eq()

.indexOf()

Math.round()

Math.random()

所以下面简单介绍一下代码的功能：一旦文档被加载，它会隐藏所有的元素，然后以随机的方式显示所有这些元素。

Answer 2

您可以使用JavaScript index_of（）函数来检查，如果在字符串中存在一个子。如果提供的子字符串（在本例中为",<some random number>,"）不存在，则该函数返回-1。

此代码正在检查元素是否已经存在。如果没有（如果它返回< 0），它会在页面上显示它。

Answer 3

根据作者的意图，它应该显示elementsToShow小宠物的数量，从元素列表中选择randomply。作为结果，您会收到alreadyChoosen字符串，将举行由逗号连接ID列表，像这样：

1,2,3,6,1 

只有一个与此approatch问题。随机无法预测。如果您的清单中有5个宠物小精灵，并且要显示的小精灵数量是4甚至5，那么您可能会在漫长的循环中停留，直到它结束。

代码：

这将从0..elementCount

var rand = Math.floor(Math.random() * elementCount); 

选择随机数，这个人会去检查，如果这个号码已经被检查

if (alreadyChoosen.indexOf("," + rand + ",") < 0) { 

但这aproatch有另一个bug： 如果我们随机选择2，并且在这个列表中将会包含2个字符的数字，比如22,12。它会通过，因为您正在比较字符串，而不是数字。

在我看来，这应该是这个样子：

var elementsToChoose = [0,1,2,3,4,...,elementCount] 
var index= Math.floor(Math.random() * elementsToChoose.length); 
var newElement = elementsToChoose [index]; 
// remove your new element from array 
elementsToChoose .splice(index, 1) 

你先alocate每一个元素的索引数组，不是随意弹出（get和删除）随机元素，直到你有足够多的人