如何在单击jQuery函数中正确传递$（this）

I am trying to make a tictactoe project in jQuery and I am having a major problem...

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

The tiles are in <td> tags and I am trying to make it so that when the user clicks the the tile, it calls the "marked" function.

瓷砖在标签中，我试图使其成为当用户点击瓷砖时，它调用“标记”功能。

If we now look into the "marked" function, $(this) is intended to be the <td> node that the function was called from.

如果我们现在查看“标记”函数，$（this）应该是调用函数的节点。

However, it wasn't doing anything so I checked the console and apparently $(this) was containing the DOM Window object.

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

Is there anyway I can send the right kind of $(this) to the "marked" function?

无论如何我可以将正确的$（this）发送到“标记”功能吗？

Thank you!

谢谢！

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

8 个解决方案

#1

You code does not follow the right principles.

您的代码不符合正确的原则。

$(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. Wrap everything in the document.ready function. Avoid global variables wherever possible.
2. 在document.ready函数中包装所有内容。尽可能避免使用全局变量。
3. Make use of the fact that jQuery manages this for you. this will always be what you expect if you pass callback functions directly instead of calling them yourself.
4. 利用jQuery为您管理的事实。如果你直接传递回调函数而不是自己调用它，这将永远是你所期望的。

#2

Send the element which fire the event to the function like that:

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

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

and in the function:

并在功能：

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

#3

More simply, use bind :

更简单地说，使用bind：

$(".detailsbox").click(function(evt){
   test.bind($(this))();
});
function test()
{
   var $this = $(this);
}

#4

try this:

尝试这个：

$(function(){
    var listCells = $.makeArray($("td"));
    $("td").click(function(){marked($(this),listCells)});  
});



function marked(o,arr)
{
...

#5

You can use the call method to specify the scope for the function:

您可以使用call方法指定函数的范围：

$("td").click(function(){ marked.call(this, listCells); });

Now the marked function can access the clicked element using the this keyword.

现在，标记的函数可以使用this关键字访问被点击的元素。

#6

You need to pass $(this) to your function:

你需要将$（this）传递给你的函数：

$("td").click(function(){ marked(listCells, $(this))} );

And modify your function like this:

并修改你的功能：

function marked(arr, that)
{
  that.addClass("marked");

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

  var tileNum = that.attr("id");
}

#7

Try:

尝试：

$("td").click(function(event){
    marked(listCells, $(this));
});

Then:

然后：

function marked(arr, sel) {
    console.log($(this));
    sel.addClass("marked");

    if(turn == TURN_X) {
        this.innerHTML = "X";
        turn = false;
    } else {
        this.innerHTML = "O";
    }
    var tileNum = $(this).attr("id");
}

#8

$(document).ready(function(){
    var TURN_X = false,
        TURN_O = true,
        turn = false,
        listCells = $.makeArray($("td"));

    $("td").click(function() {
        marked(listCells, this)
    });

    function marked(arr, self) {
        $(self).addClass("marked");

        if(turn == TURN_X) {
            self.innerHTML = "X";
            turn = false;
        }else{
            self.innerHTML = "O";
            var tileNum = self.id;
        }
    }
});