jquery计数器/反计数器函数

Question

我正在做一个功能，用户可以点击一个星星，计数器会增加，不一样的词就会出现。然后，如果用户单击“不像计数器”，则“不一样”一词消失。到目前为止，它起作用了。

挑战是这样的:我希望每个用户只能点击一次(现在起作用了)，但是我希望他们能够再次单击星星，如果他们已经单击了不一样的短语(这将从计数器中删除数字)。(下面是代码和弹琴)。

<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

我认为如果我正确理解了你的问题，

我使用:visible而不是count，因为我假设计数将从服务器返回，可能不是1或0。它将是> 1。

在这里

$(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 3

好吧，那就颠倒你的逻辑吧。无论何时隐藏.star，都需要显示.unstar，而无论何时隐藏.unstar，都需要显示.star。