JQuery счетчик / функция подсчета

Question

Я работаю над функцией, где пользователи могут щелкнуть звездочку, и счетчик увеличится, и появится слово Unlike.Затем, если пользователь нажимает кнопку «Unlike», счетчик уменьшается, а слово «Unlike» исчезает.Пока что это работает.

Проблема заключается в следующем: я хочу, чтобы каждый пользователь мог щелкнуть только один раз (это работает сейчас) , но я хочу, чтобы они могли снова щелкнуть звездочку, ЕСЛИ ониуже нажали фразу «В отличие от» (которая убрала бы номер из счетчика).(Код и jsfiddle ниже).

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);
    });

 });    

Кроме того, вот jsскрипка - http://jsfiddle.net/j5qAs/

Answer 1

Я думаю, что ниже следует сделать трюк. Если я правильно понял ваш вопрос,

Я использовал :visible вместо count, потому что я предполагал, что счет будет возвращен с сервера, и он может не быть1 или 0 .. это будет> 1.

DEMO здесь

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

    $('.star').bind("click", function() {        // <-- changed to bind
        if ($('.unstar').is(':visible')) return; // <-- added
        count1++;
        $('.unstar').show();

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

    $('.unstar').bind("click", function() {     // <-- changed to bind
        count1--;
        $('.unstar').hide();

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

 });    

Answer 2

Просто измените one на bind и добавьте чек на :visible или :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/

Answer 3

ОК, так что просто поменяйте логику. Всякий раз, когда вы прячете .star, вам нужно показывать .unstar, а всякий раз, когда вы прячете .unstar, вам нужно показывать .star.