防止改变颜色的单元格再次改变颜色

问题描述：

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

这是我到目前为止的代码：

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>

答

您需要保留的元素是否已经被点击的轨道。这样做的一种方法是使用.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; 

});

答

让一个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>

将其标记

防止改变颜色的单元格再次改变颜色

相关推荐