how do i make the JS/jquery tic tac toe squares only clickable once?

Question

As i have it now my script makes the 3x3 grid clickable, and I dont know exactly how to turn on the click once it has been clicked. This is using jQuery and a simple if else statement to switch between turns.

    $(document).ready(function(){
  var turn = 0;
    $("#cell11, #cell12, #cell21,  #cell22, #cell13, #cell23, #cell31, #cell32, #cell33, ")
            .click(
            function(){
                var cell = $(this);
                if(turn===0){
                    turn = 1;
                cell.css("background","url(images/o.png)");
                }
                else{
                    turn = 0;
                    cell.css("background","url(images/x.png)");
                }
            })
});

Answer 1

You should keep track of which cells have been clicked on. Either make a 3x3 array and store the state in there, or store the state directly on each cell. Then in the click event, check to see if the state is the default (0 should be fine) then proceed. Otherwise, just exit the onclick event

Something like this should work:

$(document).ready(function()
{
    var turn = 0;

    $("#cell11, #cell12, #cell21, #cell22, #cell13, #cell23, #cell31, #cell32, #cell33").click(function()
    {
        var cell = $(this);

        if(cell.attr('data-state') == 0)
        {
            if(turn===0)
            {
                turn = 1;
                cell.css("background","url(images/o.png)").attr('data-state', 1);
            }
            else
            {
                turn = 0;
                cell.css("background","url(images/x.png)").attr('data-state', 2);
            }
        }
    })
});

Answer 2

I would suggest you use a class attribute to keep track of which cells are clicked. Then you can move your styles to your css file. This would make your javascript code a little cleaner.

So, for example, in your javascript:

$(document).ready(function(){
    var turn = 0;
    $("#cell11, #cell12, #cell21,  #cell22, #cell13, #cell23, #cell31, #cell32, #cell33, ").click(function(){
        var cell = $(this);
        if ( !cell.hasClass("x") && !cell.hashClass("o") ) {
            if(turn==0){
                turn = 1;
                cell.addClass("o");
            }else{
                turn = 0;
                cell.addClass("x");
            }
        }
    });
});

Then somewhere in your css file:

.o {
    background: url(images/o.png);
}
.x {
    background: url(images/x.png);
}