如何实现方向键选按钮、回车/点击更新innerHTML输出对应内容及代码优化

核心修改点 #

• 新增数字到英文的映射表，统一转换逻辑
• 抽离公共方法，复用选中按钮、更新屏幕显示的逻辑
• 修复原有回车事件的错误逻辑，绑定按钮点击事件实现相同的显示逻辑
• 优化DOM查询逻辑，减少重复查询，新增默认初始选中态，避免首次操作无响应
• 点击按钮时同步更新行、列索引值，保证键盘操作和鼠标操作的状态同步

完整可运行代码 #

HTML（和原有代码一致，无修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="screen">--</button>
<div class="multiple">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>
<div class="multiple">
  <button>4</button>
  <button>5</button>
  <button>6</button>
</div>
<div class="multiple">
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

CSS（仅补充了少量样式优化显示效果，核心逻辑无修改） #

#screen {
  width:100%;
  padding:20px;
  background: #222;
  color:lime;
  border: none;
  text-align: left;
  font-size: 18px;
}
button.selected {
  background: green;
  color: #fff;
}
.multiple button {
  border: 1px solid blue;
  color: #222;
  padding: 10px 25px;
  cursor: pointer;
  width:25%;
}
.multiple button:hover {
  background-color: orange;
}

JavaScript（修改优化后） #

// 基础变量定义
let columns = 0;
let rowButtons = 0;
const $rows = $('.multiple');
const $allBtns = $('.multiple button');
const arrows = { left: 37, up: 38, right: 39, down: 40, enter: 13 };
// 数字转英文映射表
const numToWord = {
  1: 'One', 2: 'Two', 3: 'Three',
  4: 'Four', 5: 'Five', 6: 'Six',
  7: 'Seven', 8: 'Eight', 9: 'Nine'
};

// 公共方法：更新屏幕显示
function updateScreen(num) {
  $('#screen').text(numToWord[num]);
}

// 公共方法：选中指定位置的按钮
function selectBtn(row, col) {
  $allBtns.removeClass('selected');
  const $target = $rows.eq(row).find('button').eq(col);
  $target.addClass('selected');
  return $target;
}

// 初始默认选中第一个按钮
selectBtn(rowButtons, columns);

// 键盘事件绑定
$(window).keydown(function(e) {
  if (Object.values(arrows).indexOf(e.which) === -1) return;
  e.preventDefault();
  
  switch (e.which) {
    case arrows.up:
      rowButtons = rowButtons === 0 ? $rows.length - 1 : rowButtons - 1;
      break;
    case arrows.down:
      rowButtons = rowButtons === $rows.length - 1 ? 0 : rowButtons + 1;
      break;     
    case arrows.left:
      const $leftRowBtns = $rows.eq(rowButtons).find('button');
      columns = columns === 0 ? $leftRowBtns.length - 1 : columns - 1;
      break;
    case arrows.right:
      const $rightRowBtns = $rows.eq(rowButtons).find('button');
      columns = columns === $rightRowBtns.length - 1 ? 0 : columns + 1;
      break;
    case arrows.enter:
      const currentNum = selectBtn(rowButtons, columns).text();
      updateScreen(currentNum);
      return;
  }
  selectBtn(rowButtons, columns);
});

// 鼠标点击事件绑定
$allBtns.on('click', function() {
  const $this = $(this);
  // 同步更新行、列索引
  rowButtons = $this.parent('.multiple').index();
  columns = $this.index();
  // 选中按钮+更新屏幕
  selectBtn(rowButtons, columns);
  updateScreen($this.text());
});

功能说明 #

1. 键盘操作：上下左右切换选中态，按回车自动将当前选中按钮的数字转换为对应英文显示在顶部屏幕区域
2. 鼠标操作：点击任意数字按钮，自动选中该按钮，同时将对应英文显示在顶部屏幕区域
3. 鼠标点击后键盘操作状态不会错位，两种操作方式的状态完全同步

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