創建可點擊的網格jQuery / Javascript

Question

我的目標是在jQuery / javascript中創建一個可單擊的網格，當單擊一個單元格時，它將返回該單元格的索引值，然后在第一次單擊后不再允許單擊（我正在玩棋盤游戲，因此單擊在板上將是一個舉動，一旦您移動了，就不能移動，直到下一個回合。 但是，目前我在使點擊事件正常工作方面遇到問題。

現在，我只是想做到這一點，因此當我單擊網格時，它將單元格的顏色更改為紅色。

我看過在Web瀏覽器中創建可單擊的網格，但是我對js的了解很少，所以我對回調函數的工作方式感到困惑。 因此，我試圖使用該示例和jQuery的一部分，至少在我看來，在將事件附加到事物上時，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"); 
});

編輯：請將點擊處理程序放入ready（）處理程序中，如下所示：

$(document)ready({
    grid();

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

問題是定義處理程序時，表（#grid）不存在。 您也可以嘗試將處理程序放在table標記之后。

創建可點擊的網格jQuery / Javascript

問題描述

1 個解決方案

解決方案1
1 已采納 2014-03-15 23:26:56

創建可點擊的網格jQuery / Javascript

問題描述

1 個解決方案

解決方案1 1 已采納 2014-03-15 23:26:56

解決方案1
1 已采納 2014-03-15 23:26:56