Question

我找到了一些代码并希望了解它是如何工作的，有人可以向我解释一下这部分是什么

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

{{1}}

Answer 1

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

此代码正在检查元素是否已存在。如果不是（如果它返回一些＆lt; 0），它会在页面上显示它。

Answer 2

根据作者的意图，它应显示elementsToShow个小精灵，从元素列表中选择randomply。因此，您将收到alreadyChoosen字符串，其中包含逗号连接的ID列表，如下所示：

1,2,3,6,1

此批准只有一个问题。随机无法预测。如果您的库存中有5个口袋妖怪，并且要显示的口袋妖怪数量是4或甚至5，那么您可能会在它结束之前陷入长循环。

代码：

这将从0..elementCount

中选择随机数

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

此人将检查此号码是否已经过检查

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

但这个aproatch有另一个错误：如果我们随机选择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)

你首先使用每个元素的索引来分配一个数组，而不是随机弹出（获取和删除）随机元素，直到你得到它们为止

Answer 3

$(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
    }
}
});

有关详细信息，请参阅评论。希望它有所帮助。

更多详情：

所以这就是代码的作用简而言之，只要加载文档，它就会用class="champ"隐藏所有元素，然后以随机的方式显示所有这些元素。

无法理解javascript代码

3 个答案: