Jquery counter - allow multiple clicks on li, but only once
I am making a mini-game as a hidden object. I am new to jQuery. I have a list of elements that represent images on a page. If you want to find a clue, you can click the list item and it will start an animation to show you where the object of the same name is. There is a counter for 3 clues. It all works.
The problem I'm running into is that if you click on the same list item multiple times, it uses three hints. How can I get the counter to only count each element of the list once? Thus, in other words, you can click the same item in the list multiple times, but this will decrease the counter by one. Then if you click on another list item it will decrement the counter again.
Here is a jsfiddle: http://jsfiddle.net/gudinne/ej4mLoze/
Thanks for any guidance!
Js
// hintCounter of 3 counts down to 0 and changes behaviors
var hintCounter = 3;
$('.itemList li').on('click', function () {
// check if has hints
if (hintCounter > 0) {
hintCounter--;
$('.xHints').html(hintCounter + ' Hints');
} else {
// else show the message out of hints
$('.directions').html('Sorry you are all<br /> out of hints. <br />Keep Searching!');
}
});
Html
<div class="itemWrapper">
<ul class="itemList">
<li class="baseball">Baseball</li>
<li class="bacon">Bacon</li>
</ul>
<div id="hintBox"> <span class="youHave">You Have</span>
<span class="xHints">3 Hints</span>
<p class="directions">Use a hint by clicking on a name in the list.</p>
</div>
CSS
.itemWrapper {
border: 2px solid;
width: 400px;
height: 271px;
white-space: normal;
position: relative;
}
.itemList {
margin: 0;
padding: 45px 55px;
}
.itemList li {
list-style-type: none;
position: relative;
cursor: pointer;
text-transform: uppercase;
font-size: 20px;
text-align: center;
}
#hintBox {
width: 300px;
margin: 0 auto;
text-align:center;
color: blue;
}
.xHints {
font-weight: bold;
}
source to share
You can simply add a class to indicate when they were used (this also means you can tweak them accordingly):
http://jsfiddle.net/TrueBlueAussie/ej4mLoze/1/
$('.itemList').on('click', 'li:not(.used)', function () {
$(this).addClass("used");
I changed the event handler to a delegated event handler so that the selection (i.e. not(.used)
) happens at the time of the event (and not when the event is registered).
Update based on comment:
If you want to keep the prompts, but not decrement the counter, you can simply check for the existence of the class when deciding whether to decrement:
eg. http://jsfiddle.net/TrueBlueAussie/ej4mLoze/3/
$('.itemList').on('click', 'li', function () {
// check if has hints
if (hintCounter > 0) {
if (!$(this).hasClass("used")) {
hintCounter--;
}
$('.xHints').html(hintCounter + ' Hints');
} else {
// else show the message out of hints
$('.directions').html('Sorry you are all<br /> out of hints. <br />Keep Searching!');
}
$(this).addClass("used");
});
source to share
You can try to remove the listener from this link when it is clicked.
Add to
$(this).off();
above or below your decmenter.
jsfiddle: http://jsfiddle.net/ej4mLoze/2/
Caveat: TrueBlueAussie's answer might let you create a tooltip to let the user know they've already been clicked. If you don't care, this is probably an easier solution.
source to share