jquery counter / uncounterfunction

我正在开发一个function，用户可以点击星号，计数器将增加，并显示不同的单词。 然后，如果用户点击不同，计数器减少，单词不同消失。 到目前为止，它的确有效。

挑战在于：我希望每个用户只能点击一次（现在正在工作）， 但我希望他们能够再次点击星号，如果他们已经点击了不同的短语 （这将删除了该号码）计数器）。 （下面的代码和jsfiddle）。

HTML

Star  · Unlike 

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。

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 3

好的，所以只需改变你的逻辑。 每当你隐藏.star时，你需要显示.unstar，每当你隐藏.unstar时，你需要显示.star。