如何用jQuery实现点击按钮切换另一按钮状态，且首个按钮点击后禁用5秒？

实现逻辑 #

• 统一封装第一个按钮的状态切换、防重复点击逻辑
• 第二个按钮点击时触发第一个按钮的点击事件，复用现有逻辑，保证两端触发效果完全一致

完整代码 #

HTML #

<script src="jquery.min.js"></script>

<button class="outline" id="anchor-sample-btn">On</button>

<p>点击第二个按钮时，第一个按钮若为<b>Off</b>状态切换为<b>On</b>，反之亦然</p>

<button class="outline" id="second-btn">点击我切换第一个按钮的On/Off状态</button>

JavaScript #

$(document).ready(function() {
  // 第一个按钮核心交互逻辑
  $('#anchor-sample-btn').on('click', function() {
    const $targetBtn = $(this);
    // 切换On/Off状态
    $targetBtn.text($targetBtn.text() === 'On' ? 'Off' : 'On');
    // 禁用5秒防止重复点击
    $targetBtn.prop('disabled', true);
    setTimeout(() => {
      $targetBtn.prop('disabled', false);
    }, 5000);
  });

  // 第二个按钮作为替代触发入口
  $('#second-btn').on('click', () => {
    $('#anchor-sample-btn').trigger('click');
  });
});

如需调整禁用时长，直接修改setTimeout的第二个参数即可，单位为毫秒，当前5000对应5秒。

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