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

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

瓷砖在

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

如果我们现在查看“标记”函数， $(this)应该是调用函数的

节点。

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

无论如何我可以将正确的$(this)发送到“标记”function吗？

谢谢！

  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将永远是你所期望的。

Answer 2

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

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

并在function：

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

Answer 3

更简单地说，使用bind：

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

Answer 4

试试这个：

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

Answer 5

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

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

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

Answer 6

你需要将$(this)传递给你的函数：

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

并修改你的function：

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

Answer 7

尝试：

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

然后：

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

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