I’m trying to make a little memory game, and I have some jQuery issues:
The game is made with code only, so the pairs are made out by html-symbols. What I want is to reload the page if the symbols of two clicked “tiles” are not the same.
I tried with if ($(this).text() != $(".active").text()) {, it doesn’t seem to work. I am a jQuery n00b, so sorry if I have made obvious, stupid errors ^__^
location.reload();
}
Link: http://www.carlpapworth.com/htmlove/memory.html
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>
Javascript:
$(document).ready(function() {
$('td').click(openCard);
function openCard(){
$(this).addClass('opened');
$(this).find('a').addClass('visible');
if ($(".active")[0]){
function match(){
if ($(this).text() != $(".active").text()) {
location.reload();
}
else {
$(".active").removeClass("active");
}
}
}
else {
$(this).addClass("active");
}
}
});
try something like this