jquery - 为什么我不能添加类

Question

为什么类“markO”和“markX”不附加到找到的项目？  

 function buldTicTacToeUI(gameState) {
 var html ='<div id="game">';
    for (var i = 1; i <= 9; i++) {
        html += ("<span id=" + i + " class='box' />");
    }
    html += '</div>';
    if (gameState.X != null) {
        for (var i = 0; i < gameState.X.length; i++) {
            $(html).find("#game .box#" + gameState.X[i]).addClass("markX");

        }
    }
}       

Answer 1

你可以像我猜的那样做：

function buldTicTacToeUI(gameState) {
    var html = '<div id="game">';
    for (var i = 1; i <= 9; i++) {
        html += ("<span id=" + i + " class='box" + (gameState.X != null ? " markX" : "") + "' />");
    }
    html += '</div>';
}

Answer 2

append在使用 jQuery 找到它之前，您需要将 html 字符串添加到 DOM。

 function buldTicTacToeUI(gameState) {
 var html ='<div id="game">';
    for (var i = 1; i <= 9; i++) {
        html += ("<span id=" + i + " class='box' />");
    }
    html += '</div>';
    $(document).append(html); //append where you prefer
    if (gameState.X != null) {
        for (var i = 0; i < gameState.X.length; i++) {
            $("#game .box #" + gameState.X[i]).addClass("markX");
        }
    }
 }

Answer 3

找到gameState[i]细胞的奇怪方法。

$(html).find("#game .box#" + gameState.X[i])

以上与您声明的 ID 不匹配。您将元素 ID 声明为i从 1 到 9 的整数，但是您期望 id 与 gameState.X[i] 匹配。您还应该正确引用 ID。

ID 选择器可能仅在元素实际位于 DOM 中时起作用——在此阶段，您已经构建了它们，但没有附加它们。在您尝试和搜索它们之前附加，可能是明智的。

此外，这是一个复杂的选择器——仅在 ID 上进行选择（不需要父级或类）会更简单、更有效。

这是一种更好的方法，使用明确的“cellN”元素 ID：

function buldTicTacToeUI (gameState) {
    var html ='<div id="game">';
    for (var i = 1; i <= 9; i++) {
        html += "<span id='cell"+i+"' class='box' />";
    }
    html += '</div>';
    var result = $(html);
    result.appendTo( 'body');  // or wherever you want to put it
    if (gameState.X != null) {
        for (var i = 0; i < gameState.X.length; i++) {
            var cellNum = gameState.X[i];   // is this a cell number?
            $("#cell"+cellNum).addClass("markX");
        }
    }
    return result;
}