如何在单击jQuery函数中正确传递$(this) [英] How to pass $(this) properly in click jQuery function
问题描述
我正在尝试在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管理
这个$的事实c $ c>为你。
如果传递回调函数,这个
将永远是你所期望的直接而不是自己打电话。
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.
这篇关于如何在单击jQuery函数中正确传递$(this)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!