Почему я не могу добавить класс

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

Вы должны append HTML-строку в DOM до нахождения его с JQuery.

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 2

Странный способ найти ячейку gameState[i].

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

выше не соответствуют идентификаторам вы объявляли .. вы объявили идентификаторы элементов в i является целым числом от 1 до 9, но тогда вы ожидали идентификатор, чтобы соответствовать gameState.X [я]. Вы должны также указать идентификатор должным образом.

ID-селекторы могут работать только тогда, когда элементы фактически находятся в DOM - на данном этапе здесь вы их построили, но не добавили. Добавляя до того, как вы попробуете &, найдите их, вероятно, было бы разумно.

Кроме того, это сложный селектор, где просто выбор по идентификатору (без требования родителя или класса) будет проще & более эффективным.

Вот лучший способ сделать это, используя однозначные «cellN» идентификаторы элементов:

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; 
} 

Answer 3

Вы можете просто сделать это так, я думаю:

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>'; 
}