$（this）有问题

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

编辑：

OP希望在点击时执行其他操作。

因此，您可以使用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);