jquery - 如何在click jQuery函数中正确传递$(this)

Question

我正在尝试用 jQuery 制作一个 tictactoe 项目，但遇到了一个大问题......

图 block 位于 <td>标签，我试图做到这一点，以便当用户单击图 block 时，它会调用“标记”功能。

如果我们现在查看“标记”函数，$(this)旨在成为 <td>调用该函数的节点。

但是，它没有做任何事情，所以我检查了控制台，显然 $(this)包含 DOM Window 对象。

无论如何我可以发送正确的类型$(this)到“标记”功能？

谢谢!

<script type="text/javascript">

    var TURN_X = false;
    var TURN_O = true;

    var turn = false;  // this is to see whos turn it is.

    $(document).ready(function(){

        var listCells = $.makeArray($("td"));
        $("td").click(function(){marked(listCells)});   //THIS IS WHERE I HAVE PROBLEMS
        return false;
    });

    function marked(arr)
    {
        console.log($(this));  // THIS CONSOLE LOG RETURNS "DOM Window"
        $(this).addClass("marked");

        if(turn == TURN_X)
        {
        this.innerHTML = "X";
        turn = false;
        }
        else
        this.innerHTML = "O";

        var tileNum = $(this).attr("id");
    }

Answer 1

您的代码没有遵循正确的原则。

$(function(){
    var TURN_X = "X",
        TURN_O = "O", 
        turn   = TURN_O,
        $listCells = $("td");

    function marked() {        // define event handler
        var $this   = $(this),
            tileNum = $this.attr("id");

        if ( !($this.hasClass("marked") ) {
            $this.addClass("marked").text(turn);
            turn = (turn == TURN_X) ? TURN_O : TURN_X;
        }
    }

    $listCells.click(marked);  // attach event handler
});

1. 将所有内容包装在 document.ready 函数中。尽可能避免全局变量。
2. 利用 jQuery 为您管理 this 的事实。如果您直接传递回调函数而不是自己调用回调函数，this 将始终是您所期望的。