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

本文介绍了如何在单击jQuery函数中正确传递$（this）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

这些图块位于< td> 标签，我试图让它在用户点击图块时调用标记功能。

如果我们现在查看标记功能， $（this）应该是< td> 调用该函数的节点。

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

无论如何我可以向标记功能发送正确的 $（this）吗？ / p>

谢谢！

< script type =text / javascript > var TURN_X = false; var TURN_O = true; var turn = false; //这是为了看看它是谁。 $（document）.ready（function（）{ var listCells = $ .makeArray（$（td））; $（td ）.click（function（）{marked（listCells）}）; //这就是我遇到的问题返回false; }）; 函数标记（arr） { console.log（$（this））; //这个控制台日志返回DOM窗口 $（this）.addClass（marked）; if（turn == TURN_X） { this.innerHTML =X; turn = false; } 其他 this.innerHTML =O; var tileNum = $（this）.attr（id）; }

解决方案

您的代码不遵循正确的原则。

$（function（）{ var TURN_X =X， TURN_O = O，转= TURN_O， $ listCells = $（td）; 函数标记（）{//定义事件处理程序 var $ this = $（this）， tileNum = $ this.attr（id）; if（！（$ this.hasClass（marked））{ $ this.addClass（标记）。文本（转）; 转=（转= = TURN_X）？TURN_O：TURN_X; } } $ listCells.click（标记）; //附加事件处理程序}）;

在document.ready函数中包装所有内容。尽可能避免使用全局变量。

利用jQuery管理这个为你。如果传递回调函数，这个将永远是你所期望的直接而不是自己打电话。

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

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.

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

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

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

解决方案

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

Wrap everything in the document.ready function. Avoid global variables wherever possible.

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.