jquery 计数器/非计数器函数答案

【问题标题】：jquery counter/uncounter functionjquery 计数器/非计数器函数
【发布时间】：2012-02-06 16:11:47
【问题描述】：

我正在开发一个功能，用户可以单击星号，计数器会增加，并且会出现“不同”一词。然后，如果用户单击“不同”，计数器会减少，“不同”一词会消失。到目前为止，它有效。

挑战在于：我希望每个用户只能点击一次（现在可以使用）但如果他们已经点击了“不一样”短语，我希望他们能够再次点击星标 > （这会从计数器中删除数字）。（下面的代码和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/

【问题讨论】：

标签： jquery counter

【解决方案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/

【讨论】：

【解决方案2】：

我认为下面应该可以解决问题，如果我正确理解了您的问题，

我使用: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);
    });

 });

【讨论】：

感谢您的回答；另一位用户在您之前几分钟发布了相同的答案。我确实对此投了赞成票。

【解决方案3】：

好的，所以只要颠倒你的逻辑。隐藏 .star 时，需要显示 .unstar，隐藏 .unstar 时，需要显示 .star。

【讨论】：