时间戳

首页 > 解决方案 > 如何限制一次单击新的 textContent 按钮？

javascript - 如何限制一次单击新的 textContent 按钮？

问题描述

目前，单击按钮和淡出可以多次单击。

我希望用户只能单击一次以获取新的文本按钮。因为多次单击会导致我的代码出现错误。

我尝试使用.one()，但是当新的文本按钮淡入淡出点击不起作用 - 因为按钮是同一个对象，只有textContent改变了。

如何限制按钮上的每个新textContent按钮单击一次？

let clickNumber = 0;

$("button").click(function() {
  $(this).fadeOut(3000, function() {
    $(this).fadeIn().text("B")
  })
  $("p").text(clickNumber++)
})

/*$("button").one("click", function() {
  $(this).fadeOut(3000, function() {
    $(this).fadeIn().text("B")
  })
  $("p").text(clickNumber++)
})*/
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="box">
  <button id="option1">A</button>
  <p></p>
</div>
</div>

标签： javascripthtmljquery

解决方案

所以添加一个布尔值并检查它是否处于活动状态

let clickNumber = 0;

$("button").click(function() {
  const btn = $(this);
  if (btn.data('active')) return;
  btn.data('active', true);
  $(this).fadeOut(3000, function() {
    $(this).fadeIn().text("B")
    // btn.data('active', false); If you want them to click it again
  })
  $("p").text(clickNumber++)
})
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="box">
  <button id="option1">A</button>
  <p></p>
</div>
</div>

推荐阅读