如何在单击jQuery函数中正确传递$(this)

Question

我想在jQuery中创建一个tictactoe项目,我遇到了一个重大问题......

瓷砖在<td>标签中,我试图使其成为当用户点击瓷砖时,它调用"标记"功能.

如果我们现在查看"标记"函数,$(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如果你直接传递回调函数而不是自己调用它,那么它将永远是你所期望的.

Answer 2

将触发事件的元素发送到以下函数:

$("td").click(function(){
        marked($(this));
        return false;
    });

并在功能:

function marked(td)
{
     console.log($(td));  
     $(td).addClass("marked");
     //....
}