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

Question

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

0

Почему классы "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");

        }
    }
}

Kalin Trajkov 25 сен. 2013, в 11:34

Источник

Теги:

jquery

css

3 ответа

Ещё вопросы

A. Wolff · Answer 1 · 2013-09-25T06-05-00.000Z

Вы могли бы просто сделать это, как я предполагаю:

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

Thomas W · Answer 2 · 2013-09-25T06-46-00.000Z

Странный способ найти gameState[i].

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

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

Селекторы 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;
}

что я забыл написать, что я использую функцию buldTicTacToeUI (), чтобы вернуть переменную html с добавленными классами. Есть ли способ сделать это, или должно произойти за пределами функции, где я добавляю html переменную
ID является собственностью DOM и может быть ненадежным, когда вы пытаетесь использовать его снаружи. Это тривиальная задача, если вы работаете со своими инструментами (и создаете / возвращаете элемент DOM), а не против них (пытаясь вернуть строку).

Kevin Bowersox · Answer 3 · 2013-09-25T06-33-00.000Z

Вам нужно 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");
        }
    }
 }

Вам не нужно добавлять, чтобы найти элементы с помощью jQuery
Привет Кевин! Вы упустили тот факт, что он может объявлять идентификаторы иначе, чем он их ищет.