Question

我的目标是在jQuery / javascript中创建一个可点击的网格，当单击一个单元格时，它将返回单元格的索引值，然后在第一次单击后不再允许点击（我正在进行棋盘游戏因此，单击棋盘将是一个移动，一旦你移动，你不能移动，直到你的下一个转弯）。但是，目前我遇到的问题只是让我的点击事件正常工作。

现在我只是想在我点击网格时将其更改为红色。

我看了Creating a Clickable Grid in a Web Browser但我对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'));
        }
    }
}

grid.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>

Answer 1

我会更改事件处理程序。我在jsfiddle中构建了一些可能有用的示例。如果没有，请具体告诉我们您遇到的问题。

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）不存在。您也可以尝试将处理程序放在表标记之后。

创建可点击的网格jQuery / Javascript

1 个答案: