嗨，我正在尝试使用页面上的不同元素复制事件侦听器，并将不同的元素与不同的键配对

时间：2019-04-28 19:32:52

标签： javascript html css 

var makeNextAjaxCall = true;
function ajaxCaller(url, data) {
    $.post({
        url: url,
        data: data,
        success: function(data){
            if(data.progress === 100) {
                makeNextAjaxCall = false;
            }
        },
        complete: function() {
            if(makeNextAjaxCall) {
                setTimeout(function() {
                    ajaxCaller(url, data);
                }, 5000);
            }
        }
    });
}

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');
  }
}
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代码时遇到问题，只是无法使用。

<div class="holo batman active">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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">
  <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>

我想使用其他键-为不同的元素说'KeyA'-说'.spiderman'。我曾尝试用这些替代品复制上面的代码，但这没有用。

实现此目标的最佳方法是什么？

1 个答案:

答案 0 :(得分：0)

您忘记为每个单独的div分配一个类名。我为所有这些名称添加了名称，但仅将它们与蝙蝠侠和蜘蛛侠捆绑在一起（b和s键）。尝试一下，您可以轻松添加其余部分。

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

相关问题
最新问题