const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
console.log('B clicked')
}
if (e.code == 'KeyS') {
var tag = document.querySelector('.spiderman');
tag.classList.toggle('active');
console.log('S clicked')
}
if (e.code == 'KeyI') {
var tag = document.querySelector('.ironman');
tag.classList.toggle('active');
console.log('I clicked')
}
if (e.code == 'KeyT') {
var tag = document.querySelector('.thor');
tag.classList.toggle('active');
console.log('T clicked')
}
if (e.code == 'KeyR') {
var tag = document.querySelector('.spiderman2');
tag.classList.toggle('active');
console.log('R clicked')
}
if (e.code == 'KeyD') {
var tag = document.querySelector('.thedarkknight');
tag.classList.toggle('active');
console.log('D clicked')
}
if (e.code == 'KeyA') {
var tag = document.querySelector('.avengers');
tag.classList.toggle('active');
console.log('A clicked')
}
if (e.code == 'KeyW') {
var tag = document.querySelector('.wonderwoman');
tag.classList.toggle('active');
console.log('W clicked')
}
if (e.code == 'KeyP') {
var tag = document.querySelector('.spiderman3');
tag.classList.toggle('active');
console.log('P clicked')
}
}
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;}
<div class="holo batman">
<h1>Batman</h1>
<img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo spiderman">
<h1>Spiderman</h1>
<img src="https://images.unsplash.com/photo-1521714161819-15534968fc5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo thor">
<h1>Thor</h1>
<img src="https://images.unsplash.com/photo-1495044245703-b07f266e47b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&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&auto=format&fit=crop&w=2550&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo avengers">
<h1>Avengers</h1>
<img src="https://images.unsplash.com/photo-1471877325906-aee7c2240b5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo wonderwoman">
<h1>WonderWoman</h1>
<img src="https://images.unsplash.com/photo-1517242296655-0a451dd85b30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&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&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
我希望能够同时点亮多个盒子 同时按下多个按钮-例如,一次按下S,B和T应该会点亮Thor,Batman和Spiderman框。目前,只有两个/三个框同时亮起/放大。我该如何扩展?我想选四位-如果可能的话,整个工作人员立即做出回应。
https://codepen.io/coinscrum/pen/NmJYGO
const input = document.querySelector('input');
document.addEventListener('keydown', logKey);
function logKey(e) {
if(e.code == 'KeyB') {
var tag = document.querySelector('.batman');
tag.classList.toggle('active');
console.log('B clicked')
}
if (e.code == 'KeyS') {
var tag = document.querySelector('.spiderman');
tag.classList.toggle('active');
console.log('S clicked')
}
if (e.code == 'KeyM') {
var tag = document.querySelector('.ironman');
tag.classList.toggle('active');
console.log('M clicked')
}