如何实现多按键同时触发对应DOM元素高亮放大效果？

你的代码目前只能同时激活2-3个元素，核心问题是每次keydown事件只处理单个按键的切换逻辑，没有跟踪所有当前按下的按键状态，导致多键按下时状态不同步。下面是优化后的方案，支持任意数量的按键同时触发对应元素高亮：

核心思路 #

1. 用按键-元素映射表替代一堆if判断，让代码更简洁易维护；
2. 用Set数据结构跟踪当前所有按下的按键（自动去重，避免重复触发）；
3. 统一监听keydown和keyup事件，更新按键状态后，批量刷新所有元素的高亮状态。

修改后的完整代码 #

HTML（无需修改） #

<div class="holo batman">
  <h1>Batman</h1>
  <img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80">
</div>
<div class="holo spiderman">
  <h1>Spiderman</h1>
  <img src="https://images.unsplash.com/photo-1521714161819-15534968fc5f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80">
</div>
<div class="holo ironman">
  <h1>Iron Man</h1>
  <img src="https://images.unsplash.com/photo-1509817445409-e2057fd6feac?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80">
</div>
<div class="holo thor">
  <h1>Thor</h1>
  <img src="https://images.unsplash.com/photo-1495044245703-b07f266e47b4?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80">
</div>
<div class="holo spiderman2">
  <h1>Spiderman 2</h1>
  <img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=2550&amp;q=80">
</div>
<div class="holo thedarkknight">
  <h1>The Dark Knight</h1>
  <img src="https://images.unsplash.com/photo-1519740296995-10d3d8267019?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80">
</div>
<div class="holo avengers">
  <h1>Avengers</h1>
  <img src="https://images.unsplash.com/photo-1471877325906-aee7c2240b5f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80">
</div>
<div class="holo wonderwoman">
  <h1>WonderWoman</h1>
  <img src="https://images.unsplash.com/photo-1517242296655-0a451dd85b30?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80">
</div>
<div class="holo spiderman3">
  <h1>Spiderman 3</h1>
  <img src="https://images.unsplash.com/photo-1534375971785-5c1826f739d8?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80">
</div>

CSS（无需修改） #

body {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:#333 url(https://images.unsplash.com/photo-1475862013929-0af29a1197f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) fixed 50% 50%/ cover; }
.holo {margin:0 10px 20px 10px; xwidth:300px; xheight:200px; border:5px solid rgba(0,100,200,0.5); border-radius:20px; text-align:center; color:rgba(0,100,200,0.9); background:rgba(0,0,0,0.7); transform:scale(1.0);}
.holo:hover, .holo.active {background:rgba(30,30,30,0.8); transition-duration:0.5s; transform:scale(1.1);}
.holo h1 {font: bold 30px Arial; text-transform:uppercase;}
.holo img {width:100%; width:300px; margin:10px; border-radius:20px;}

JavaScript（核心修改部分） #

// 定义按键与对应元素类名的映射表，新增/修改按键只需在这里调整
const keyElementMap = {
  'KeyB': '.batman',
  'KeyS': '.spiderman',
  'KeyI': '.ironman',
  'KeyT': '.thor',
  'KeyR': '.spiderman2',
  'KeyD': '.thedarkknight',
  'KeyA': '.avengers',
  'KeyW': '.wonderwoman',
  'KeyP': '.spiderman3'
};

// 用Set存储当前按下的按键（自动去重，避免重复触发）
const pressedKeys = new Set();

// 更新所有元素的高亮状态
function updateElementStates() {
  Object.entries(keyElementMap).forEach(([keyCode, selector]) => {
    const element = document.querySelector(selector);
    if (element) {
      // 如果按键在Set中，添加active类；否则移除
      element.classList.toggle('active', pressedKeys.has(keyCode));
    }
  });
}

// 监听按键按下事件
document.addEventListener('keydown', (e) => {
  // 避免重复添加同一按键（keydown会连续触发）
  if (!pressedKeys.has(e.code)) {
    pressedKeys.add(e.code);
    updateElementStates();
    console.log(`${e.code} pressed`);
  }
});

// 监听按键松开事件
document.addEventListener('keyup', (e) => {
  pressedKeys.delete(e.code);
  updateElementStates();
  console.log(`${e.code} released`);
});

优化亮点 #

1. 可维护性提升：所有按键与元素的对应关系都集中在keyElementMap里，新增或修改按键只需编辑这个对象，不用改一堆if判断；
2. 多键支持：通过Set跟踪所有按下的按键，确保任意数量的按键同时按下时，对应元素都会高亮；
3. 状态同步：每次按键事件触发后，统一更新所有元素的状态，避免单个切换导致的状态不同步问题；
4. 避免重复触发：keydown事件会连续触发，通过Set的去重特性，确保同一按键只处理一次按下逻辑。

现在你可以同时按下任意多个按键（比如S、B、T），对应的Spiderman、Batman、Thor元素会同时高亮放大，甚至可以激活所有元素！

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