jquery counter/uncounter function

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

});  

而且，这里的爵士小提琴 - 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); 
    }); 

});