javascript - 将 .each() 与数组一起使用

Question

我正在使用 jQuery 创建一个 Matching Card 游戏。目前，我遇到了一个问题，我的代码中的 playerChoices 数组没有使用“匹配”类更新“匹配”卡片。

var playerChoices = [];

function showCard(){

    $(this).addClass('selected'); //mark the selection with the selected class

    playerChoices.push($(this)); //push the players choice onto the playerChoices array
    console.log(playerChoices);

    moves++;
    console.log(moves);

    $('#buttons').show();
    matchCards(playerChoices);

}

这是问题所在的函数:

function matchCards(array){

    if(playerChoices.length === 3){
        //when the player finds the first match
        if(playerChoices[0].attr('class') === playerChoices[1].attr('class')){  //if both playerChoices have the class 
            console.log("match found at index 0 and 1 of playerchoice!");
            **$(playerChoices).each(playerChoices, function(index, element){
                $(this).addClass('matched');**
            })
        }

        //Deselect the two choices that were made
        else{ 
            $(playerChoices).each(function(index, element){
                $(this).removeClass('selected');
            })
            playerChoices = [];
        }
    }

    else if(playerChoices.length === 4){

        //when the player gets the second match
        if(playerChoices[2].attr('class') === playerChoices[3].attr('class')){
            console.log("match found at index 2 and 3 of playerchoice!");
            **$(playerChoices).each(playerChoices, function(index, element){
                $(this).addClass('matched');**
            })
            **showGameOverMessage();**
        }

        //Deselect the last two choices that were made
        else{
            $(playerChoices).each(function(index, element){
                $(this).removeClass('selected');
            })
        }
    }
}

这里的主要问题是我的代码中有“星号”的区域。我在控制台中设置了断点，我发现代码从未到达 $(this).addClass('matched') 行。我以前从未使用过 .each 并查看了 api.jquery.com 示例，但我仍然无法克服将匹配类应用于我的“匹配”卡片的问题。

仅供引用:我试图让我的代码在 JSFiddle 中工作，但我的卡片图像总是出现错误。我的代码在这之外工作，我只是无法正确应用匹配的类。

https://jsfiddle.net/2sharkp/54s47vzb/ 现在工作

非常感谢任何帮助!

Answer 1

您更新的问题使问题变得清晰:您正在将 jQuery 实例 推送到 playerChoices:

playerChoices.push($(this));

...然后使用 $(playerChoices).each(...) 尝试遍历它们。虽然 $() 在 $() 函数中接受 HTML 元素数组，但如果您向它传递一个 jQuery 实例数组，它就无法正确理解它——您最终用一个 jQuery 实例包裹那组 jQuery 实例，这没有用 — 您也可以只使用数组(或者使用单个 jQuery 实例，正如我稍后描述的那样)。

您可以使用 $.each (jQuery 函数本身):

$.each(playerChoices, function() {
    // ...`this` (not `$(this)`) here will be a jQuery instance:
    this.addClass('matched');
});

Updated Fiddle

但你真的不需要$.each，只需使用数组内置的forEach:

playerChoices.forEach(function(entry) {
    // ...`entry` here will be a jQuery instance
    entry.addClass('matched');
});

Updated Fiddle

...或者还有很多其他方法可以遍历我的回答 here 中概述的数组.

也就是说，您可以考虑将playerChoices 设为(单个)jQuery 实例。 jQuery 基于集合，因此单个 jQuery 实例可以包含多个 HTML 元素，然后您只需调用一个方法即可对这些元素进行操作。例如，如果您将 playerChoices 设为 jQuery 实例，而不是:

playerChoices.forEach(function(entry) {
    entry.addClass('matched');
});

你可以这样做:

playerChoices.addClass('matched');

要做到这一点，首先要:

playerChoices = $();

...并通过add添加元素:

playerChoices.add(this);