Функция jquery counter/uncounter

Question

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

Задача заключается в следующем: Я хочу, чтобы каждый пользователь только может нажать один раз (что в настоящее время работает) , но я хочу, чтобы иметь возможность снова нажмите на звездочку, если они уже щелкнул отличие от фразы (который будет удалили номер со счетчика). (Код и 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

Просто измените 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 2

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

Answer 3

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

Я использовал :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); 
    }); 

});