防止改變顏色的單元格再次改變顏色

Question

我想創建一種可點擊的網格。每當我點擊一個空白單元格時，它應該變成黑色或白色。我點擊的下一個單元應該是另一種顏色（如果我點擊的第一個單元是白色，則下一個單元應該是黑色，反之亦然）。我完成了這個工作，但是如果我已經點擊了一個單元格，它會再次改變顏色，這不應該發生。

這是我到目前爲止的代碼：

var white=true; 
 
function generateGrid(rows, cols) { 
 
    var grid = "<table>"; 
 
    for (row = 1; row <= rows; row++) { 
 
     grid += "<tr>"; 
 
     for (col = 1; col <= cols; col++) {  
 
      grid += "<td></td>"; 
 
     } 
 
     grid += "</tr>"; 
 
    } 
 
    return grid; 
 
} 
 

 
$("#tableContainer").append(generateGrid(5, 5)); 
 

 
$("td").click(function() { 
 
    var index = $("td").index(this); 
 
    var row = Math.floor((index)/5) + 1; 
 
    var col = (index % 5) + 1; 
 
    if (white==true){ 
 
     $(this).css('background-color', 'white'); 
 
     white=false 
 
    } 
 
    else if (white==false){ 
 
     $(this).css('background-color', 'black'); 
 
     white=true; 
 
    } 
 
});

html{ 
 
    background-color:blue; 
 
} 
 
td { 
 
    border: 1px solid; 
 
    width: 25px; 
 
    height: 25px; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
}

<link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div id="tableContainer"></div>

Answer 1

您需要保留的元素是否已經被點擊的軌道。這樣做的一種方法是使用.data()：

$("td").click(function() { 
    var $td = $(this); 
    if ($td.data('clicked')) 
     return; 

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

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

}); 

Answer 2

讓一個CSS類

var white=true; 
 
function generateGrid(rows, cols) { 
 
    var grid = "<table>"; 
 
    for (row = 1; row <= rows; row++) { 
 
     grid += "<tr>"; 
 
     for (col = 1; col <= cols; col++) {  
 
      grid += "<td></td>"; 
 
     } 
 
     grid += "</tr>"; 
 
    } 
 
    return grid; 
 
} 
 

 
$("#tableContainer").append(generateGrid(5, 5)); 
 

 
$("td").click(function() { 
 
    if ($(this).hasClass('played')) { 
 
     // already played 
 
     return; // bail 
 
    } 
 
    $(this).addClass('played'); 
 

 
    var index = $("td").index(this); 
 
    var row = Math.floor((index)/5) + 1; 
 
    var col = (index % 5) + 1; 
 
    if (white==true){ 
 
     $(this).css('background-color', 'white'); 
 
     white=false 
 
    } 
 
    else if (white==false){ 
 
     $(this).css('background-color', 'black'); 
 
     white=true; 
 
    } 
 
});

html{ 
 
    background-color:blue; 
 
} 
 
td { 
 
    border: 1px solid; 
 
    width: 25px; 
 
    height: 25px; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
}

<link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div id="tableContainer"></div>

將其標記