javascript - 将 .each() 与数组结合使用

Question

我正在使用 jQuery 创建一个匹配卡游戏。目前，我遇到了一个问题，即我的代码中的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);