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回调函数，使它成为一个函数声明（带有一个名字），这样它就可以第二次被引用注册

您还可以在现在（用于所有意图和目的）禁用按钮中添加一个简单的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元素，并在每次单击按钮时检查此类，以检测先前是否单击了此按钮。

＆＃13;

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();
  }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

如果您不想完全删除事件绑定，也可以向被点击的元素添加一个类。

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

仅为首次单击按钮增加计数器

5 个答案: