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

在使用jQuery查找之前，您需要append 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中时才起作用 - 在此阶段，您已构建它们，但不会附加它们。在尝试之前添加＆amp;搜索它们，可能是明智的。

此外，这是一个复杂的选择器 - 只需选择ID（不需要父级或类）将更简单＆amp;效率更高。

这是一种更好的方法，使用明确的'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;
}

为什么我不能添加课程

3 个答案: