我试图在jQuery中做一个tictactoe项目,我有一个主要的问题…
瓦片位于< td>标签,我试图使它,以便当用户单击该图块时,它调用“标记”功能。
如果我们现在查看“标记”函数,$(this)将是< td>该函数被调用的节点。
然而,它没有做任何事情,所以我检查了控制台,显然$(这)包含DOM Window对象。
谢谢!
<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"); }
解决方法
你的代码不遵循正确的原则。
$(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 });
将所有内容包装在document.ready函数中。尽可能避免使用全局变量。>利用jQuery为你管理这个事实。如果您直接传递回调函数,而不是自己调用它们,这将永远是您期望的。