多同类优惠券按钮点击切换文本及复制功能实现问题

问题说明 #

你之前的setTimeout效果不符合预期是因为时序写反了：你将切换为COPIED状态的逻辑放到了2秒延迟执行的回调里，变成点击后等2秒才显示复制成功，正确逻辑应该是点击后立刻切换为成功状态，再通过setTimeout延迟2秒执行恢复默认文本的逻辑。

优化后代码 #

HTML 部分 #

<p class="code" id="code10">OFF10</p>
<button class="coupon-btn" data-code-target="#code10">
  <strong>COPY CODE</strong>
</button>

<p class="code" id="code20">OFF20</p>
<button class="coupon-btn" data-code-target="#code20">
  <strong>COPY CODE</strong>
</button>

<p class="code" id="code35">OFF35</p>
<button class="coupon-btn" data-code-target="#code35">
  <strong>COPY CODE</strong>
</button>

注：修正了原代码中第三个按钮ID重复的问题，移除了冗余的行内onclick绑定，通过data-code-target自定义属性关联按钮和对应优惠券码元素。

Javascript 部分 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// 复制优惠券码逻辑
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

// 统一绑定所有优惠券按钮点击事件
$('.coupon-btn').on('click', function() {
  var $btn = $(this);
  // 清除当前按钮之前的定时器，避免重复点击导致状态错乱
  if ($btn.data('resetTimer')) {
    clearTimeout($btn.data('resetTimer'));
  }
  
  // 执行复制逻辑
  var codeTarget = $btn.data('code-target');
  copyToClipboard(codeTarget);
  
  // 立刻切换为复制成功状态
  $btn.html('<strong>COPIED <span><em>some svg icon here</em></span></strong>');
  
  // 2秒后恢复为默认文本
  var resetTimer = setTimeout(function() {
    $btn.html('<strong>COPY CODE</strong>');
  }, 2000);
  
  // 存储定时器ID到按钮属性，方便后续清除
  $btn.data('resetTimer', resetTimer);
})
</script>

实现效果说明 #

• 点击任意优惠券按钮，会自动复制对应优惠码，同时按钮立刻切换为带图标的COPIED状态
• 成功状态保持2秒后自动恢复为默认的COPY CODE文本
• 重复点击会重置计时，不会出现状态错乱
• 所有按钮共用一套逻辑，没有冗余函数，后续新增优惠券按钮只需要照格式加HTML即可，不需要修改JS代码

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