创建可点击网格jQuery/Javascript

我的目标是在jQuery/javascript中创建一个可点击的网格，当一个单元格被点击时，它将返回单元格的索引值，然后不允许在第一次点击后再点击(我在一个棋盘游戏上工作，所以点击棋盘将是一个移动，一旦你移动了，你就不能移动，直到你的下一个回合)。然而，目前我有问题，只是让我的点击事件正常工作。

现在我只是想让它，当我点击我的网格它的颜色改变为红色的单元格。

我看了在Web浏览器中创建一个可点击的网格，但我对js的经验很少，所以我对回调函数的工作方式感到相当困惑。因此，我尝试使用该示例的一部分和jQuery，至少对我来说，当涉及到将事件附加到事物时，它似乎更容易理解。

编辑:忘了说我的问题是什么，但事实是，当我运行以下所有代码并单击网格时，什么也没有发生。

grid.js:

$(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'));
        }
    }
}

css:

.grid { margin:1em auto; border-collapse:collapse }
.grid td {
    cursor:pointer;
    width:30px; height:30px;
    border:1px dotted #ccc;
    text-align:center;
    font-family:sans-serif; font-size:16px
}
.grid td.clicked {
    background-color:red;
}

test.html:

<!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>

我将更改事件处理程序。我做了一个小样本，可能会有帮助。如果没有，请告诉我们具体是什么问题。

http://jsfiddle.net/richbuff/gLF4W/

$("td").bind("click", function(){
   alert( $(this).text() );
   // change style here
   $(this).addClass("clicked"); 
});

编辑:请像这样将click处理程序放入ready()处理程序中:

$(document)ready({
    grid();
$("td").bind("click", function(){
   alert( $(this).text() );
   // change style here
   $(this).addClass("clicked"); 
});

问题是在定义处理程序时表(#grid)不存在。您还可以尝试将处理程序放在表标记之后。

相关内容

最新更新

热门标签：