创建可点击的网格jQuery/Javascript
我的目标是在jQuery/javascript中创建一个可点击的网格，当点击一个单元格时，它将返回该单元格的索引值，然后在第一次点击后不允许再点击（我正在做一个棋盘游戏，所以点击棋盘就是一个移动，一旦你移动了，你就不能移动，直到下一个回合）。然而，目前我在让我的点击事件正常工作方面遇到了一些问题 现在，我只是想让它成为这样，当我点击我的网格时，它会将单元格的颜色更改为红色 我看过，但我对js的经验很少，所以我对回调函数的工作原理相当困惑。因此，我试图使用该示例的一部分和jQuery，至少在我看来，在将事件附加到事物时，jQuery似乎更容易理解 编辑：忘了说我的问题是什么，但事实上，当我运行以下所有代码并单击网格时，什么都没有发生 grid.js：创建可点击的网格jQuery/Javascript,javascript,jquery,html,Javascript,Jquery,Html,我的目标是在jQuery/javascript中创建一个可点击的网格，当点击一个单元格时，它将返回该单元格的索引值，然后在第一次点击后不允许再点击（我正在做一个棋盘游戏，所以点击棋盘就是一个移动，一旦你移动了，你就不能移动，直到下一个回合）。然而，目前我在让我的点击事件正常工作方面遇到了一些问题 现在，我只是想让它成为这样，当我点击我的网格时，它会将单元格的颜色更改为红色 我看过，但我对js的经验很少，所以我对回调函数的工作原理相当困惑。因此，我试图使用该示例的一部分和jQuery，至少在我看来
$(document).ready(function()
{
grid();
});
$("#grid td").click(function()
{
alert("Clicked!");
$("#grid td").addClass("clicked");
});
function grid()
{
var grid = document.getElementById("grid");
for(var r = 0; r<18; r++)
{
var tr = grid.appendChild(document.createElement('tr'));
for(var c = 0; c<18; c++)
{
var cell = tr.appendChild(document.createElement('td'));
}
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="grid.css" rel="stylesheet">
<script src="grid.js"></script>
</head>
<body>
<table class="grid" id="grid">
</table>
</body>
</html>
我将更改事件处理程序。我在JSFIDLE中构建了一个可能会有所帮助的小示例。如果没有，请让我们具体了解您遇到的问题 编辑：请将单击处理程序放入ready（）处理程序中，如下所示：
$(document)ready({
grid();
$("td").bind("click", function(){
alert( $(this).text() );
// change style here
$(this).addClass("clicked");
});
问题是在定义处理程序时，表（#grid）不存在。您也可以尝试将处理程序放在table标记之后。告诉我们有关这些问题的更多信息。这是否回答了您的问题？我把我的代码改成了你的代码，但它仍然没有任何作用。我注意到您的JSFIDLE示例和我的代码之间的唯一区别是我在grid.js中生成网格。这会引起问题吗？
$("td").bind("click", function(){
alert( $(this).text() );
// change style here
$(this).addClass("clicked");
});
$(document)ready({
grid();
$("td").bind("click", function(){
alert( $(this).text() );
// change style here
$(this).addClass("clicked");
});