僅在第一次單擊按鈕時增加計數器

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">