変更された色のセルが再び色の変化するのを防ぐ

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

あなたは要素がクリックされたか否かを追跡する必要があります。これを行う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>

とそれをマークすることができます