CODEWITHSUNDEEP
javascriptjqueryhtml
user826345
user826345

Reputation: 89

jquery counter - allow multiple clicks on li but only count once

I am making a mini-game like a hidden object. I am novice at jQuery. I have a list of items that represent images on a page. When a hint is needed to find an item, the list item can be clicked and it will start an animation to show where the object of the same name is. There is a counter for 3 hints. This all works.

The issue I am having is that if you click on the same list item multiple times it uses up the three hints. How would I get the counter to only count each list item once? So, in other words, you could click the same item on the list multiple times but it would only reduce the counter by one. Then if you clicked a different list item it would reduce the counter again by one.

Here is 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;
 }

Upvotes: 3

Views: 1093

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93571

You can simply add a class to tell when they have been used (this also means you can style 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)) will happen at event time (and not when the event is registered).

Update based on comment:

If you want to keep the tips, but not decrement the counter, you can simply test for the existence of a class when deciding to decrement:

e.g. 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");
});

Upvotes: 3

pjc
pjc

Reputation: 127

You could try removing the listener on that link when it's clicked.

Add

    $(this).off();

above or below your decrementer.

jsfiddle: http://jsfiddle.net/ej4mLoze/2/

Caveat: TrueBlueAussie's answer could allow you to generate a tooltip letting the user know it's already been clicked. If you don't care about that though, this is probably the simpler solution.

Upvotes: 6

Related Questions