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（'匹配'）行。我以前从未使用过.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);

Answer 2

尝试在回调之前删除playerChoices

$(playerChoices).each(function(index, element){
  $(this).addClass('matched');
})

jsfiddle https://jsfiddle.net/xowkyh6p/1/

将.each（）与数组一起使用

2 个答案: