javascript - 如何确保在 javascript 中只选择 2 个 div

Question

我四处搜索了很多，但似乎找不到我要找的东西，太好了，这不是 super 重复。我正在用 vanilla javascript 制作一个非常简单的内存游戏(试图远离 jquery，这样我就可以掌握 JS 的基础知识)

这是 fiddle 的链接，因此您可以看到整个作品以及我认为给我带来麻烦的功能:https://jsfiddle.net/69kfgxbn/

var showTile = function() {
var tile = document.getElementsByClassName('tile');
var tilesChosen = 0;
console.log(this.style.backgroundColor);
console.log(this);

if (tilesChosen < 2) {
    this.classList.remove('card-back');
    tilesChosen = tilesChosen + 1;
    console.log('under 2');
    console.log(tilesChosen);
}
else if (tilesChosen == 2) {
    tile.removeEventListener('click', function() {
        console.log('hit the max');
    })
}

};

我的问题是我可以点击一个图 block ，移除了卡片背面类别以显示颜色，但我不知道如何将其限制为仅 2 个图 block 。

我目前的思路是这样的:

tilesChosen 设置为零
if 语句检查 tilesChosen 是否为 < 2
如果是这样，将 tilesChosen 增加 1
否则，如果 tilesChosen == 2，则删除所有类上的事件处理程序，我认为这会阻止任何人覆盖超过 2 个瓷砖。

但到目前为止，无论您单击了多少个图 block ，我什至都没有进入 elseIf。此外，tilesChosen 不会递增超过 1，所以就像我陷入了语句的 if 部分。我还将这个 if/else 放在 for 和 while 循环中，希望强制它循环并测试 tilesChosen 的值，但它是同一回事。

非常感谢你们的任何建议!

Answer 1

var jsBoard = []; var gamePieces = 12; var tilesChosen = 0;

每次单击时，都会将变量 tilesChosen 重新设置为 0，因此它永远不会达到您想要的值。您应该声明为全局 tilesChosen

像这样

var jsBoard = [];

var gamePieces = 12;var tilesChosen = 0;

现在你不能点击更多的div