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

我认为以下应该可以解决问题，如果我理解你的问题，

我使用:visible代替count，因为我认为计数将从服务器返回，并且可能不是1或0 ..它将是＆gt; 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。

jquery counter / uncounter功能

3 个答案: