I'm currently making a Match Two app (tap on squares, find the matching pictures) I am having issues with 1 part of it. Disabling the click event so a certain square can't be clicked until it resets itself. I've tried replaceWith but the issue with that is that once I run that the event doesn't run again even if I use attr to put the id back in. I've tried off() but that just seems to break it.
HTML Snippet:
<table border="1">
<tr>
<td id="" colspan="3">Lifes Remaining:</td>
<td id="lives"></td>
</tr>
<tr id="1to4">
<td class="a1" id="a1">0</td>
<td class="a2" id="a2">0</td>
<td class="a3" id="a3">0</td>
<td class="a4" id="a4">0</td>
</tr>
<tr>
<td colspan="4"><input type="button" id="press" value="Press" /></td>
</tr>
</table>
Code Snippet:
var set1a = 1, set1b = 1, set2a = 2, set2b = 2;
var rand1 = 0;
var rand2 = 0;
var lives;
var savedData1 = "", savedData2 = "";
var check1 = "", check2 = "";
var idCheck1 = "", idCheck2 = "";
$(document).ready(function()
{
$("#lives").text("");
$("#press").click(function()
{
lives = 3;
$("#lives").text(lives);
for(var i = 1; i < 5; i++)
{$("#a"+i).text("0").css('color', 'black');}
i = 0;
<!-----------------Set Position--------------------------------->
do{rand1 = 1 + Math.floor(Math.random() * 4);}
while($("#a"+rand1).text() != 0)
$("#a"+rand1).text(set1a);
do{rand2 = 1 + Math.floor(Math.random() * 4);}
while($("#a"+rand2).text() != 0)
$("#a"+rand2).text(set1b);
do{rand1 = 1 + Math.floor(Math.random() * 4);}
while($("#a"+rand1).text() != 0)
$("#a"+rand1).text(set2a);
do{rand2 = 1 + Math.floor(Math.random() * 4);}
while($("#a"+rand2).text() != 0)
$("#a"+rand2).text(set2b);
<!-----------------Set Position--------------------------------->
});
$("#a1").click(function()
{
$(".a1").css('color', 'lightgreen');
if(check1 == "")
check1 = $("#a1").text();
else
check2 = $("#a1").text();
if(idCheck1 == "")
idCheck1 = "#a1";
else
idCheck2 = "#a1"
if(check1 && check2 != "")
{
if(check1 != check2)
{
$(".a1").css('color', 'black');
}
}
});
$("#a2").click(function()
{
$(".a1").css('color', 'lightgreen');
check1 = '1';
if(idCheck1 == "")
{
idCheck1 = "#a1";
}
else
idCheck2 = "#a1"
if(check1 && check2 != "")
{
$(".a1").css('color', 'black');
}
});
$("#a3").click(function()
{
});
$("#a4").click(function()
{
});
});
I need something to use in the #a1-4 click functions that allow me to disable the click function of the number that is tapped until another number is tapped and then re enable it.
Something like
$("#a1").click(function()
{
if(check1 == "")
check1 = $("#a1").text();
else
check2 = $("#a1").text();
if(idCheck1 == "")
idCheck1 = "#a1";
else
idCheck2 = "#a1"
*Disable #a1 click function*
if(check1 && check2 != "")
{
if(check1 != check2)
{
$(".a1").css('color', 'black');
*Enable #a1 click function*
}
}
});
Any help would be appricated and if you need any clarification, let me know
Mike
