javascript - 有人想帮我解决这个 javascript 逻辑吗？

Question

好吧，这就是我的问题。我对 javascript 有点陌生，所以请耐心等待。我在其他地方没有发现这个问题，实际上我认为这是我的逻辑与我的意愿不符;-)

我正在使用 php 和 javascript 设置一个内存游戏。我的问题是，当我第一次执行 clickCard 函数时，它将变量firstClick 设置为 True 及其innerHTML 值，并执行 secondaryClick 等这么长时间，但如果猜测错误，则只有 secondaryClick 变成红色。这是因为我相信第一个参数是静态的(因此保存了firstClick的颜色值)，并且我无法想出如何解决这个问题的解决方案。我尝试过不同的事情，例如创建条件，例如 if else(firstClick != 0 && firstClick != secondaryClick) {code} 等。

有谁可以帮助我吗？

这是我的代码:

var firstClick = new Boolean();
firstClick.toString();

var secondClick = new Boolean();
secondClick.toString();
function clickCard(elem){               

    if(firstClick == 0){
        firstClick = document.getElementById(elem.id).innerHTML;
                    elem.style.backgroundColor = "green";   
        //alert(firstClick);
        }

    else{

        secondClick = document.getElementById(elem.id).innerHTML;
        //alert(secondClick);
        elem.style.backgroundColor = "green";


            if(firstClick == secondClick){
                alert(firstClick +" equals "+ secondClick);
                firstClick = new Boolean();
                secondClick = new Boolean();
            }

            else {
                alert(firstClick + " equals not " + secondClick);
                firstClick = new Boolean();
                secondClick = new Boolean();
                document.getElementById(elem.id).style.backgroundColor="red";
            }   
    }
}

Answer 1

您的代码中有几个问题。看看我的更改并尝试理解它们，它应该有效:

1. 使用 var bool = true/false; 初始化 bool 值
2. 不要将 bool 值与 dom 元素混合
3. 将图 block 保存在单独的变量中
4. 实际上将第一个图 block 的颜色设置为“红色”

代码:

var firstClick = true;
var piece1;
var piece2;

function clickCard(elem){               

    if(firstClick){
        piece1 = document.getElementById(elem.id);
        piece1.style.backgroundColor = "green";
        firstClick = false;  
    } else {

        piece2 = document.getElementById(elem.id);
        piece2.style.backgroundColor = "green";

        if(piece1.innerHTML == piece2.innerHTML){
            alert(firstClick +" equals "+ secondClick);
        } else {
            alert(firstClick + " equals not " + secondClick);
            piece1.style.backgroundColor="red";
            piece2.style.backgroundColor="red";
        }   
        firstClick = true;
    }
}

现在，高级实践是将其放入闭包中以保护您的“内部”值firstClick和piece1/2，但那是另一个故事了；)