Question

我试图做一个记忆游戏，用户将有一个计时器来找出哪一对卡。现在这是基本的，没有计时器，没有随机分发的卡，我只是试图让引擎运行，现在我陷入点击事件部分。我现在想要做的就是通过javascript将CSS转换应用到点击的卡片，我也对更好的方法提出建议

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Memória</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <h1>Cartas memória</h1>
        <script src="script.js"></script>
    </body>
</html>

JS（结帐最后一个循环）

// Memoria

// criar array de simbolos 3 simbolos~repetidos 2 vezes
var simbolos = ["O","X","+","O","X","+"];
var jogo = {
    criarCartas: function () {
        var cartas = document.getElementsByClassName('carta');
        for ( i = 0 ; i < 6 ; i++ ) {
            var carta = document.createElement('div');
            var front = document.createElement('div');
            var back = document.createElement('div');
            carta.className = "carta";
            front.className = "front";
            back.className = "back";
            document.body.appendChild(carta);
            carta.appendChild(front);
            carta.appendChild(back);
            //var rand = Math.floor(Math.random() * simbolos.length);
            front.innerHTML = simbolos[i];
        }
        for ( j = 0 ; j < cartas.length ; j++ ) {
            cartas[j].onclick = function () {
                // cartas[j] will always be undefined in here, even with global variables or using this.cartas[j]
            };
        }
    }
};

// eventos

window.onload = function () {
    jogo.criarCartas();
};

CSS

body {
    font-family: verdana;
}

/* vai ser usado para efeitos hover */
.carta {
    float: left;
    width: 120px;
    height: 180px;
    margin: 10px 10px;
}
/* affect all elmenents with class front and back inside all elements with class carta */
.carta > .front, .back {
    font-size: 80px;
    line-height: 90px;
    text-align: center;
    cursor: pointer;
}

/* define a posição inicial da carta*/
.front {
    border: 1px solid black;
    position: absolute;
    width: 120px;
    height: 180px;
    background-color: #FFFF99;
    transform: rotateY(180deg);
    perspective: 400px;
    transition: 1s ease;
    backface-visibility: hidden;
}

/* a traseira ja esta virada 180 graus */

.back {
    border: 1px solid black;
    position: absolute;
    width: 120px;
    height: 180px;
    background-color: #FF66CC;
    transform: rotateY(0deg);
    perspective: 400px;
    transition: 1s ease;
    backface-visibility: hidden;
}

Answer 1

尝试将cartas声明移到第一个for循环之后

    for ( i = 0 ; i < 6 ; i++ ) {
        var carta = document.createElement('div');
        var front = document.createElement('div');
        var back = document.createElement('div');
        carta.className = "carta";
        front.className = "front";
        back.className = "back";
        document.body.appendChild(carta);
        carta.appendChild(front);
        carta.appendChild(back);
        //var rand = Math.floor(Math.random() * simbolos.length);
        front.innerHTML = simbolos[i];
    }
    var cartas = document.getElementsByClassName('carta');

您当前的代码正在尝试抓取尚未创建的carta元素（在创建和附加之前），这就是未定义的原因

Answer 2

Acutally＆＃34; this＆＃34; （非常字面意思）是解决方案：）

var simbolos = ["O","X","+","O","X","+"];
var jogo = {
    criarCartas: function () {  
        for ( i = 0 ; i < 6 ; i++ ) {
            var carta = document.createElement('div');
            var front = document.createElement('div');
            var back = document.createElement('div');
            carta.className = "carta";
            front.className = "front";
            back.className = "back";
            document.body.appendChild(carta);
            carta.appendChild(front);
            carta.appendChild(back);
            //var rand = Math.floor(Math.random() * simbolos.length);
            front.innerHTML = simbolos[i];
        }
        jogo.clicks();
    },
    clicks: function () {
        var cartas = document.getElementsByClassName('carta');
        for ( j = 0 ; j < cartas.length ; j++ ) {
            cartas[j].onclick = function () {
              this.childNodes[0].style.transform = (this.childNodes[0].style.transform != "rotateY(0deg)") ? "rotateY(0deg)" : "rotateY(180deg)";
              this.childNodes[1].style.transform = (this.childNodes[1].style.transform != "rotateY(180deg)") ? "rotateY(180deg)" : "rotateY(0deg)";
            };
        };
    }
};

即使使用全局变量，在javascript中获取变量也是未定义的

2 个答案: