Javascript 防止已更改颜色的单元格再次更改颜色

我想创建一种可点击的网格。每当我点击一个空白单元格，它就会变成黑色或白色。我单击的下一个单元格应为其他颜色（如果我单击的第一个单元格为白色，则我单击的下一个单元格应为黑色，反之亦然）。我做到了，但如果我已经点击了一个单元格，它会再次改变颜色，这是不应该发生的

这是我目前掌握的代码：

var-white=true；
函数generateGrid（行、列）{
var grid=“”；
对于（row=1；row您需要跟踪元素是否已被单击。一种方法是使用
.data（）
：

您需要跟踪元素是否已被单击。一种方法是使用
.data（）
：

让我们用CSS类来标记它


var-white=true；
函数generateGrid（行、列）{
var grid=“”；
对于（row=1；row让我们用CSS类来标记它


var-white=true；
函数generateGrid（行、列）{
var grid=“”；
对于（行=1；行
$("td").click(function() {
    var $td = $(this);
    if ($td.data('clicked')) 
        return;

    $td.data('clicked', true);

    $td.css('background-color', white ? 'white' : 'black');
    white = !white;

});