如何使用JavaScript实现通过上下箭头切换div元素的功能

我来帮你实现上下箭头按键切换按钮的功能，下面是完整的解决方案，包含代码和详细说明：

首先我先补全你给出的HTML结构（假设剩余按钮的逻辑和前面一致），再添加JavaScript逻辑来实现按键切换：

<div class="modeHolder" id="visionButtons">
  <button class="modeButton" id="fourHundred" onclick="oneLetter(this); win2.increment400();">20/400</button>
  <button class="modeButton" id="threeHundred" onclick="oneLetter(this); win2.increment300();">20/300</button>
  <button class="modeButton" id="twoHundred" onclick="oneLetter(this); win2.increment200();">20/200</button>
  <button class="modeButton" id="oneFifty" onclick="oneLetter(this); win2.increment150();">20/150</button>
</div>

<script>
// 1. 获取目标容器内的所有按钮
const buttons = document.querySelectorAll('#visionButtons .modeButton');
// 2. 跟踪当前选中的按钮索引，默认选中第一个
let currentIndex = 0;

// 3. 给第一个按钮添加初始高亮（可选，提升用户感知）
buttons[currentIndex].classList.add('active');

// 4. 监听全局键盘按键事件
document.addEventListener('keydown', (e) => {
  // 先移除当前按钮的高亮状态
  buttons[currentIndex].classList.remove('active');

  switch(e.key) {
    case 'ArrowUp':
      // 上箭头：索引递减，到顶部后循环到最后一个
      currentIndex = currentIndex <= 0 ? buttons.length - 1 : currentIndex - 1;
      break;
    case 'ArrowDown':
      // 下箭头：索引递增，到底部后循环到第一个
      currentIndex = currentIndex >= buttons.length - 1 ? 0 : currentIndex + 1;
      break;
    case 'Enter':
      // 回车键：触发当前选中按钮的点击事件，执行原有逻辑
      buttons[currentIndex].click();
      // 恢复高亮后直接返回，不需要更新索引
      buttons[currentIndex].classList.add('active');
      return;
    default:
      // 非目标按键，恢复高亮并退出
      buttons[currentIndex].classList.add('active');
      return;
  }

  // 给新选中的按钮添加高亮并设置焦点（提升可访问性）
  buttons[currentIndex].classList.add('active');
  buttons[currentIndex].focus();
});
</script>

<style>
/* 可选：自定义选中按钮的高亮样式，根据你的项目风格调整 */
.modeButton.active {
  background-color: #007bff;
  color: #fff;
  border-color: #0056b3;
}
</style>

关键逻辑说明 #

• 精准获取按钮：通过querySelectorAll只获取visionButtons容器内的按钮，避免干扰页面其他按钮元素。
• 循环切换处理：上下箭头触发时，处理边界情况——到第一个按钮后按上箭头会跳转到最后一个，反之亦然。
• 回车键触发原有逻辑：按下回车直接调用按钮的click()方法，完全复用你已写好的oneLetter和win2.incrementXXX函数。
• 视觉反馈与可访问性：通过active类提供高亮样式，同时给选中按钮设置焦点，让键盘操作的用户清晰感知当前选中项。

可选优化建议 #

如果页面有其他键盘交互元素，你可以给visionButtons添加tabindex="0"，然后监听容器的focus/blur事件，只在容器获得焦点时启用按键切换逻辑，避免冲突。

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