如何允许不同元素同时响应-按下多个按钮的同时点亮多个框

时间:2019-04-29 14:02:43

标签: javascript html css

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')
}

0 个答案:

没有答案