麻烦$（这个）

Question

我正在尝试通过编写tic-tac-toe来练习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希望点击其他内容。

所以你可以使用电话来使用＆＃39;这个＆＃39;和匿名函数。

$("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);