Проблема с $(это)

Question

Я пытаюсь попрактиковаться в JS, написав крестики-нолики. Вот мой код до сих пор:

$(document).ready(function() {
    var turn = "X";
    $("td").on("click", function() {
        updateTile();
    });
    function updateTile() {
        if ($(this).html() == "") {
            $(this).html("<h1>" + turn + "</h1>");
            updateTurn();
        }
    }
    function updateTurn() {
        if (turn == "X") {
            turn = "O";
        }
        else if (turn == "O") {
            turn = "X";
        }
    }
});

Это не работает. Моя отладка привела меня к мысли, что $(this) в updateTile() не относится к $(this) когда td нажата. Если так, то почему? $("td") это объект, который вызывает updateTile()так не должно $(this) обратитесь к td элемент?

Answer 1

Вы вызываете анонимную функцию вместо своей собственной.

Свяжите свой клик, как это:

$("td").on("click", updateTile);

РЕДАКТИРОВАТЬ:

ОП хотят делать другие вещи по клику.

Таким образом, вы можете использовать call, чтобы иметь возможность использовать this и функцию анонима.

$("td").on("click", function() {
   alert("Click");
   updateTile.call(this);
});

Answer 2

Вы вне контекста, так this это не this ты хочешь.

$(document).ready(function() {
    var turn = "X";
    $("td").on("click", function() {
        updateTile(this);
    });
    function updateTile(that) {
        if ($(that).html() == "") {
            $(that).html("<h1>" + turn + "</h1>");
            updateTurn();
        }
    }
    function updateTurn() {
        if (turn == "X") {
            turn = "O";
        }
        else if (turn == "O") {
            turn = "X";
        }
    }
});

Answer 3

JQuery внутренне связывает текущий элемент с this контекст функции, которую вы передаете в качестве обработчика. Итак, просто передайте функцию напрямую:

$("td").on("click", updateTile);