仅在第一次单击按钮时增加计数器

Question

我在页面上有多个按钮，如果单击了一个按钮，我希望它仅在第一次时计算该按钮。

在下面的代码片段中，我有3个按钮。 如果我多次单击按钮，它将使计数器多次递增，那么我如何只获得第一次单击。 所以根据我的柜台下面应该最多只能上升到3点

 var counter=0; function count() { $('.show').addClass("notification"); $(".show").html(counter); } $('.btn').on('click',function(){ counter++ count(); }) 

 .notification { position: absolute; display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: -1px; width: auto; min-width: 8px; /*height: 9px;*/ line-height: 5px; padding: 5px; border-radius: 50%; color: #fff; box-shadow: 1px 1px 5px #000; border: 2px solid #fff; background-color: #b60000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class='btn'>Click</button> <button class='btn'>Click</button> <button class='btn'>Click</button> </div> <span class="show"> 

Answer 1

只需删除click回调中的click事件绑定click 。

为此，您需要移动click回调函数，以便它是一个函数声明（带有名称），以便可以再次引用它以进行正确的注销。

您还可以将一个简单的CSS类添加到已禁用的按钮中（出于所有意图和目的），以直观的方式向用户表明该按钮已被禁用。

 var counter=0; function count() { $('.show').addClass("notification"); $(".show").html(counter); } $('.btn').on('click', increaseCount); function increaseCount(){ counter++ count(); // Job done, now disconnect this button from this event handler $(this).off("click", increaseCount); $(this).addClass("disabled"); // For visual clue that button no longer works } 

 .notification { position: absolute; display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: -1px; width: auto; min-width: 8px; /*height: 9px;*/ line-height: 5px; padding: 5px; border-radius: 50%; color: #fff; box-shadow: 1px 1px 5px #000; border: 2px solid #fff; background-color: #b60000; } .disabled { pointer-events:none; opacity:.5; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class='btn'>Click</button> <button class='btn'>Click</button> <button class='btn'>Click</button> </div> <span class="show"> 

Answer 2

您可以使用任意类来实现这一点，例如clicked 。 您可以单击一次将此类添加到button元素，并在每次单击按钮时检查此类，以检测以前是否单击了此按钮。

 var counter = 0; function count() { $('.show').addClass("notification"); $(".show").html(counter); } $('.btn').on('click',function(){ var alreadyClicked = $(this).hasClass('clicked'); if(!alreadyClicked){ $(this).addClass('clicked'); counter++; count(); } }); 

 .notification { position: absolute; display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: -1px; width: auto; min-width: 8px; /*height: 9px;*/ line-height: 5px; padding: 5px; border-radius: 50%; color: #fff; box-shadow: 1px 1px 5px #000; border: 2px solid #fff; background-color: #b60000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class='btn'>Click</button> <button class='btn'>Click</button> <button class='btn'>Click</button> </div> <span class="show"> 

Answer 3

您可以使用one绑定

 var counter = 0; function count() { $('.show').addClass("notification").html(counter); } $('.btn').one('click', function() { counter++ count(); }) 

 .notification { position: absolute; display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: -1px; width: auto; min-width: 8px; /*height: 9px;*/ line-height: 5px; padding: 5px; border-radius: 50%; color: #fff; box-shadow: 1px 1px 5px #000; border: 2px solid #fff; background-color: #b60000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class='btn'>Click</button> <button class='btn'>Click</button> <button class='btn'>Click</button> </div> <span class="show"> 

Answer 4

只需单击按钮即可删除事件

$('.btn').on('click',function(){
      counter++
      count();
      $(this).off('click');
});

Answer 5

如果您不想完全删除事件绑定，也可以将类添加到clicked元素中。

 let counter=0; const count = () => { $('.show').addClass("notification"); counter++; $(".show").html(counter); } $('.btn').on('click', (e) => { const $button = $(e.currentTarget); if(!$button.hasClass('clicked')){ count(); $button.addClass('clicked'); } }); 

 .notification { position: absolute; display: block; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: -1px; width: auto; min-width: 8px; /*height: 9px;*/ line-height: 5px; padding: 5px; border-radius: 50%; color: #fff; box-shadow: 1px 1px 5px #000; border: 2px solid #fff; background-color: #b60000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <button class='btn'>Click</button> <button class='btn'>Click</button> <button class='btn'>Click</button> </div> <span class="show">