如何实现第二次点击按钮时隐藏对应的label标签

以下两种原生JavaScript方案都可以实现需求，无需引入任何第三方库。

方案1：通过元素自定义属性存储点击次数 #

这种方式的计数状态直接绑定在按钮元素上，调试时可以直接在元素属性中查看计数，非常方便：

<button id="btn">Button</button>
<label id="lbl">lbl</label>

<script>
const btn = document.getElementById('btn');
const lbl = document.getElementById('lbl');
// 初始化点击次数
btn.dataset.clickCount = 0;

btn.addEventListener('click', function() {
  const currentCount = Number(btn.dataset.clickCount) + 1;
  btn.dataset.clickCount = currentCount;
  
  if (currentCount === 2) {
    // 隐藏label，如需保留占位可替换为 lbl.style.visibility = 'hidden'
    lbl.style.display = 'none';
    // 达到目标后移除事件监听，避免无效执行
    btn.removeEventListener('click', arguments.callee);
  }
});
</script>

方案2：通过闭包存储点击次数 #

这种方式的计数变量不会暴露到全局作用域，不会产生全局变量污染：

<button id="btn">Button</button>
<label id="lbl">lbl</label>

<script>
const btn = document.getElementById('btn');
const lbl = document.getElementById('lbl');

btn.addEventListener('click', (() => {
  let clickCount = 0;
  return function() {
    clickCount++;
    if (clickCount === 2) {
      lbl.style.display = 'none';
    }
  }
})());
</script>

补充说明 #

如果需要实现点击偶数次隐藏、奇数次显示的切换效果，可以修改判断逻辑为：

if (clickCount % 2 === 0) {
  lbl.style.display = 'none';
} else {
  lbl.style.display = 'inline';
}

内容的提问来源于stack exchange，提问作者Sarvesh