如何将Javascript中的函数与条件交织？

Question

Here's my problem:
I'm programming a little game where you need to connect numbers, which are in a table, on your screen with mouse clicks. After you pressed the right number, they will be connected by a line, which is a png file and has 0 width and height. That changes after you clicked the cell with the right number. Now, it works, but you could just press the first cell over and over again to get all the lines. I'm trying for hours now to find a solution, but nothing works for me.
Thank you
Here's the code:

cellNumber = 49;
$("#cell_"+cellNumber).click(function()
{
    $("#line_"+lineCounter).attr("width", "600px");
    $("#line_"+lineCounter).attr("height", "440px");
    cellNumber = 65;
    lineCounter++;
    $("#cell_"+cellNumber).click(function()
    {
        $("#line_"+lineCounter).attr("width", "600px");
        $("#line_"+lineCounter).attr("height", "440px");
        cellNumber = 110;
        lineCounter++;
        $("#cell_"+cellNumber).click(function()
        {
            $("#line_"+lineCounter).attr("width", "600px");
            $("#line_"+lineCounter).attr("height", "440px");
            cellNumber = 112;
            lineCounter++;
            $("#cell_"+cellNumber).click(function()
            {
                $("#line_"+lineCounter).attr("width", "600px");
                $("#line_"+lineCounter).attr("height", "440px");
            });
        });
    });
});

Answer 1

You can't nest click events, it's counter-intuitive. Click events are bound to objects upon the document ready event and thus must be within the document.ready() function in order to work.

$(document).ready(function() {
    cellNumber = 49;
    $("#cell_"+cellNumber).click(function() {
        $("#line_"+lineCounter).attr("width", "600px");
        $("#line_"+lineCounter).attr("height", "440px");
        cellNumber = 65;
        lineCounter++;
    });
    $("#cell_"+cellNumber).click(function() {
        $("#line_"+lineCounter).attr("width", "600px");
        $("#line_"+lineCounter).attr("height", "440px");
        cellNumber = 110;
        lineCounter++;
    });
    $("#cell_"+cellNumber).click(function() {
        $("#line_"+lineCounter).attr("width", "600px");
        $("#line_"+lineCounter).attr("height", "440px");
        cellNumber = 112;
        lineCounter++;
    });
    $("#cell_"+cellNumber).click(function() {
        $("#line_"+lineCounter).attr("width", "600px");
        $("#line_"+lineCounter).attr("height", "440px");
    });
});

Answer 2

How about removing click from correctly selected cells;

cellNumber = 49;
    $("#cell_"+cellNumber).on('click', function()
    {
        $("#line_"+lineCounter).attr("width", "600px");
        $("#line_"+lineCounter).attr("height", "440px");
        $("#cell_"+cellNumber).off('click')
        cellNumber = 65;
        lineCounter++;
        $("#cell_"+cellNumber).on('click', function()
        {
            $("#line_"+lineCounter).attr("width", "600px");
            $("#line_"+lineCounter).attr("height", "440px");
           $("#cell_"+cellNumber).off('click')
            cellNumber = 110;
            lineCounter++;
            $("#cell_"+cellNumber).on('click', function()
            {
                $("#line_"+lineCounter).attr("width", "600px");
                $("#line_"+lineCounter).attr("height", "440px");
                $("#cell_"+cellNumber).off('click')
                cellNumber = 112;
                lineCounter++;
                $("#cell_"+cellNumber).click(function()
                {
                    $("#line_"+lineCounter).attr("width", "600px");
                    $("#line_"+lineCounter).attr("height", "440px");
                });
            });
        });
    });