如何在显示时启动我的 td 并在单击时显示它们

Question

Example of my table So basically im making a minesweeper game with PHP/Javascript. The thing is that I would like my td's to be revealed at first, and when you click on a td it unreveals itself including the content. Since im very new to programming I need all the help I can get. And if possible, explain what does what with comments or so. posted below is my javascript that im using. If you need the PHP code as well, let me know :) BUG = mine

$(document).ready(function () {
    $("td").click(function () {
        if ($(this).text() == '') {
            $(this).css('background-color', 'DarkGray');
            console.log("Je hebt op een leeg vakje geklikt");
        }

        if ($(this).text() == 'BUG') {
            $("td:contains('BUG')").css('background-color', 'Gray');
            $("td:not(:contains('BUG'))").css('background-color', 'DarkGray');
            console.log("Je hebt op een bug geklikt");
        }

        $("#renew").click(function () {
            location.reload();
        });
    })
});

Answer 1

You want to hide / reveal specific table cell texts based on user clicks.

You cannot do that with background-color, since that will not override the text (the text will still be written above the background color).

Trying not to diverge from your current implementation, you could make all your td cells have font-size: 0px, and then when the user clicks, change the font size to be mlarger than 0 so the text shows (along with changing backgrounds and whatever else you want).

CSS

td{
font-size: 0px;
}

JS

$(document).ready(function () {
$("td").click(function () {

    $(this).css('font-size', '18px');

    if ($(this).text() == '') {
        $(this).css('background-color', 'DarkGray');
        console.log("Je hebt op een leeg vakje geklikt");
    }

    if ($(this).text() == 'BUG') {
        $("td:contains('BUG')").css('background-color', 'Gray');
        $("td:not(:contains('BUG'))").css('background-color', 'DarkGray');
        console.log("Je hebt op een bug geklikt");
    }

    $("#renew").click(function () {
        location.reload();
    });
})

});

Edit: This is a clunky way of implementing the desired functionality. A better way would be to, instead of adding BUG text directly into your td, write your td to hold information about whether or not it contains a BUG.

For example:

<td data-type="BUG"></td>
<td data-type="NOT"></td>
<td data-type="BUG"></td>

Then, when the user clicks on a td, you check if data-type is BUG, and if it is, add 'BUG' into the clicked td, and in that way you 'reveal' what the td was.

For example with before mentioned html:

$("td").click(function(){
   if($(this).attr("data-type") === "BUG"){
       //user clicked on a td with a BUG
       $(this).text('BUG');
   }
});