使用JQuery实现点击任意两个按钮交换文本内容的方案

嘿，这个互换按钮文本的需求实现起来很直观，核心就是要跟踪用户第一次点击的按钮，等第二次点击时完成交换。我给你写了一个清晰易懂的实现方案，还加了用户体验优化：

完整实现代码 #

<button id="btn1">1</button>
<button id="btn2">2</button>
<button id="btn3">3</button>
<button id="btn4">4</button>
<button id="btn5">5</button>

<script>
// 用来存储第一次点击的按钮实例
let firstClicked = null;

// 批量获取所有按钮并绑定点击事件
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', function() {
    // 情况1：还没选第一个按钮，记录下来并给个视觉反馈
    if (!firstClicked) {
      firstClicked = this;
      this.style.backgroundColor = '#f0f0f0'; // 高亮选中状态
      this.style.borderColor = '#666';
    } 
    // 情况2：已经选了第一个，且点击的是另一个按钮，执行互换
    else if (firstClicked !== this) {
      // 临时保存第一个按钮的文本
      const tempText = firstClicked.textContent;
      // 互换文本
      firstClicked.textContent = this.textContent;
      this.textContent = tempText;
      
      // 重置选中状态，准备下一次互换
      firstClicked.style.backgroundColor = '';
      firstClicked.style.borderColor = '';
      firstClicked = null;
    }
    // 情况3：重复点击同一个按钮，不做任何操作
  });
});
</script>

逻辑解释 #

1. 状态跟踪：用firstClicked变量存储用户第一次点击的按钮，初始值为null表示还未选择任何按钮。
2. 点击事件处理：
   • 第一次点击按钮时，将该按钮实例存入firstClicked，并通过修改样式让用户直观看到自己选中了哪个按钮。
   • 第二次点击不同按钮时，临时保存第一个按钮的文本，然后交换两个按钮的内容，之后重置样式和状态变量，方便后续继续操作。
   • 如果用户不小心重复点击同一个按钮，代码会直接跳过，避免无效操作。

这个方案逻辑简单清晰，还兼顾了用户体验，你可以直接复制使用，也可以根据自己的需求调整样式或者扩展功能~

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