jQuery memory game: if $('.opened').length; == number run function.
- by Carl Papworth
So I'm trying to change the a.heart when there is td.opened == 24. I'm not sure what's going wrong though since nothings happening.
HTML:
<body>
<header>
<div id="headerTitle"><a href="index.html"><html<span class="heart">♥</span>ve></a>
</div>
<div id="help">
<h2>?</h2>
<div id="helpInfo">
<p>How many tiles are there? Let's see [calculating] 25...</p>
</div>
</div>
</header>
<div id="reward">
<div id="rewardContainer">
<div id="rewardBG" class="heart">♥
</div>
<p>OMG, this must be luv<br><a href="index.html" class="exit">x</a></p>
</div>
</div>
<div id="pageWrap">
<div id="mainContent">
<!-- DON'T BE A CHEATER !-->
<table id="memory">
<tr>
<td class="pair1"><a>Ψ</a></td>
<td class="pair2"><a>¶</a></td>
<td class="pair3"><a>Ξ</a></td>
<td class="pair1"><a>Ψ</a></td>
<td class="pair4"><a >⊗</a></td>
</tr>
<tr>
<td class="pair5"><a>♠</a></td>
<td class="pair6"><a >Φ</a></td>
<td class="pair7"><a>§</a></td>
<td class="pair8"><a>♣</a></td>
<td class="pair4"><a>⊗</a></td>
</tr>
<tr>
<td class="pair9"><a>Ω</a></td>
<td class="pair2"><a>¶</a></td>
<td id="goal">
<a href="#reward" class="heart">♥</a>
</td>
<td class="pair10"><a>©</a></td>
<td class="pair9"><a>Ω</a></td>
</tr>
<tr>
<td class="pair11"><a>∴</a></td>
<td class="pair8"><a>♣</a></td>
<td class="pair12"><a>†</a></td>
<td class="pair6"><a>Φ</a></td>
<td class="pair11"><a>∴</a></td>
</tr>
<tr>
<td><a class="pair12">†</a></td>
<td><a class="pair5">♠</a></td>
<td><a class="pair10">©</a></td>
<td><a class="pair3">Ξ</a></td>
<td><a class="pair7">§</a></td>
</tr>
</table>
<!-- DON'T BE A CHEATER !-->
</div>
</div> <!-- END Page Wrap -->
<footer>
<div class="heartCollection">
<p>collect us if u need luv:<p>
<ul>
<li><a id="collection1">♥</a></li>
<li><a id="collection2">♥</a></li>
<li><a id="collection3">♥</a></li>
<li><a id="collection4">♥</a></li>
<li><a id="collection5">♥</a></li>
<li><a id="collection6">♥</a></li>
</ul>
</div>
<div class="credits">with love from Popm0uth ©2012</div>
</footer>
</body>
</html>
Javascript:
var thisCard = $(this).text();
var activeCard = $('.active').text();
var openedCards = $('.opened').length;
$(document).ready(function() {
$('a.heart').css('color', '#CCCCCC');
$('a.heart').off('click');
function reset(){
$('td').removeClass('opened');
$('a').removeClass('visible');
$('td').removeClass('active');
};
$('td').click(openCard);
function openCard(){
$(this).addClass('opened');
$(this).find('a').addClass('visible');
if ($(".active")[0]){
if ($(this).text() != $('.active').text()) {
setTimeout(function(){
reset();
}, 1000);
}
else {
$('.active').removeClass('active');
}
}
else {
$(this).addClass("active");
}
if (openedCards == 24){
$(".active").removeClass("active");
$("a.heart").css('color', '#ff63ff');
$("a.heart").off('click');
}
}
});
