Question

I’m working on a function where users can click a star and a counter will increase and the word Unlike will appear. Then, if users click on Unlike the counter decreases and the word Unlike disappears. So far, it works.

The challenge is this: I want each user to only be able to click once (that’s working now) but I want them to be able to click the star again IF they have already clicked the Unlike phrase (which would have removed the number from the counter). (Code and jsfiddle below).

HTML

<span href="" class="star">Star</span>&nbsp;<span class="star_number"></span> 
&#183;&nbsp;<span class="unstar">Unlike</span>

jQuery

$(function(){
    $('.unstar').hide();
    var count1=0;

    $('.star').one("click", function() { 
        count1++;
    $('.unstar').show();

    $('.star_number').html(count1);
    });

    $('.unstar').one("click", function() { 
        count1--;
    $('.unstar').hide();

    $('.star_number').html(count1);
    });

 });    

Also, here’s the js fiddle – http://jsfiddle.net/j5qAs/

Answer 1

Just change one to bind and add a check for :visible or :hidden

$(function(){
    $('.unstar').hide();
    var count1=0;

    $('.star').bind("click", function() { 
        if ($('.unstar').is(':hidden')) {
            count1++;
            $('.unstar').show();
            $('.star_number').html(count1);
        }
    });

    $('.unstar').bind("click", function() { 
        count1--;
        $('.unstar').hide();
        $('.star_number').html(count1);
    });    
});    

http://jsfiddle.net/j5qAs/3/