时间戳

首页 > 解决方案 > 是否可以保存在 JavaScript 上单击的元素以供以后在函数中使用？

javascript - 是否可以保存在 JavaScript 上单击的元素以供以后在函数中使用？

问题描述

我目前正在用 JS、HTML 和 CSS 编写一个跳棋界面。我已经建立了板和部件。我想编写函数以便现在移动这些部分。我想通过要求用户单击该作品，然后要求他/她单击他们想要将其移动到的方块来做到这一点。假设这是一个合法的举动，我有没有办法将点击的部分保存为变量或其他任何东西，并稍后在函数中使用它（这会将它移动到请求的方块）？这是我的（很长的）JS 代码（结合了一些 CSS 和 HTML）：

var player = 1;
function CreateBoard() {
    var board = document.createElement("table");
    board.cellSpacing = 0;
    for (var i = 0; i < 8; i++) {
        var tr1 = document.createElement("tr");
        for (var j = 0; j < 8; j++) {
            var td1 = document.createElement("td");
            td1.setAttribute("id", "td" + i + j);
            if (i % 2 == 0) {
                if (j % 2 == 0)
                    td1.style.backgroundColor = "beige";
                else
                    td1.style.backgroundColor = "black";
            }
            else {
                if (j % 2 == 0)
                    td1.style.backgroundColor = "black";
                else
                    td1.style.backgroundColor = "beige";
            }
            tr1.appendChild(td1);
        }
        board.appendChild(tr1);
    }
    document.body.appendChild(board);
}

function DeployPieces() {
    CreateBoard();
    var pieceIndex = 1;
    var isEmpty = new Array(8);
    for (var i = 0; i < 8; i++) {
        isEmpty[i] = new Array(8);
        for (var j = 0; j < 8; j++) {
            isEmpty[i][j] = true;
        }
    }
    for (var i = 0; i < 8; i++) {
        if (i < 3) {
            if (i % 2 == 0) {
                for (var j = 1; j < 8; j += 2) {
                    var td1 = document.getElementById("td" + i + j);
                    var circle1 = document.createElement("span");
                    circle1.setAttribute("class", "redCircle");
                    circle1.setAttribute("id", "circle" + i + j);
                    circle1.setAttribute("onclick", "AlertToPressOnSquare(player);");
                    td1.appendChild(circle1);
                    isEmpty[i][j] = false;
                }
            }
            else { 
                for (var j = 0; j < 8; j += 2) {
                    var td2 = document.getElementById("td" + i + j);
                    var circle2 = document.createElement("span");
                    circle2.setAttribute("class", "redCircle");
                    circle2.setAttribute("id", "circle" + i + j);
                    circle2.setAttribute("onclick", "AlertToPressOnSquare(player);");
                    td2.appendChild(circle2);
                    isEmpty[i][j] = false;
                }
            }
        }
        else if (i > 4) {
            if (i % 2 == 0) {
                for (var j = 1; j < 8; j += 2) {
                    var td3 = document.getElementById("td" + i + j);
                    var circle3 = document.createElement("span");
                    circle3.setAttribute("class", "whiteCircle");
                    circle3.setAttribute("id", "circle" + i + j);
                    circle3.setAttribute("onclick", "AlertToPressOnSquare(player);");
                    td3.appendChild(circle3);
                    isEmpty[i][j] = false;
                }
            }
            else {
                for (var j = 0; j < 8; j += 2) {
                    var td4 = document.getElementById("td" + i + j);
                    var circle4 = document.createElement("span");
                    circle4.setAttribute("class", "whiteCircle");
                    circle4.setAttribute("id", "circle" + i + j);
                    circle4.setAttribute("onclick", "AlertToPressOnSquare(player);");
                    td4.appendChild(circle4);
                    isEmpty[i][j] = false;
                }
            }
        }  
    }
}
function AlertToPressOnPiece(player) {
    alert("Player " + player + ", please press on the piece you would like to move");
    if (player == 1)
        player = 2;
    else if (player == 2)
        player = 1;
}
function AlertToPressOnSquare(player) {
    alert("Player " + player + ", please press on the square to which you would like to move the piece");
    if (player == 1)
        player = 2;
    else if (player == 2)
        player = 1;

}

现在，我有所有 td 和圆的 id（我这样做是为了使 id 是元素的初始位置（例如 01 = i = 0，j = 1））。我也知道保存后我将如何移动它。我只需要一种简单的方法来稍后访问点击的圆圈（可能通过它的 id 或任何东西）。谢谢

标签： javascripthtml

解决方案

您可以将整个元素保存到变量中，但最好只保存片段的 x 和 y 位置。您可以创建公共变量selectedX和selectedY/或创建单个变量，例如selected = { x: 5, y: 6 }. 然后，您可以随时通过以下方式获取元素：

var element = document.getElementById('td' + selected.x + selected.y);

这是基于您在上面分配 id 的格式：

td1.setAttribute("id", "td" + i + j);

推荐阅读