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

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 事件绑定(bind)。

为此，您需要移动 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">