在关键事件上更改多个背景图像

Question

我有一个设置了背景图片的圆形倒数计时器。当我按下 'space' 时，计时器启动，这样就可以了。但是现在我想设置背景图像（其中有 3 个），以便在按键事件 (1,2,3) 上，背景图像会发生变化。我不想要 onclick 事件！我的问题 atm 是 4 个功能中只有一个同时工作。有没有更简单的方法来实现这一点，或者我可能只是在这里遗漏了一些愚蠢的东西？

代码如下：

 document.body.onkeyup = function(e){
     if(e.keyCode == 32){
         countdown.start();
     } 

 document.body.onkeyup = function(e){
     if(e.keyCode == 49){
         $('body').css("background-image", "url(/img/image1.jpg)");
     } 

 document.body.onkeyup = function(e){
     if(e.keyCode == 50){
         $('body').css("background-image", "url(/img/image2.jpg)");
     } 

 document.body.onkeyup = function(e){
     if(e.keyCode == 51){
         $('body').css("background-image", "url(/img/image3.jpg)");
     }

提前感谢大家的帮助:)

Answer 1

问题是因为您覆盖了 onkeyup 处理程序。您可以将所有逻辑放在一个处理程序中。使用 addEventListener 附加处理程序也会更好，如下所示：

document.body.addEventListener('keyup', function(e){
  if (e.keyCode == 32){
    countdown.start();
  } else if(e.keyCode == 49) {
    $('body').css("background-image", "url(/img/image1.jpg)");
  } else if (e.keyCode == 50) {
    $('body').css("background-image", "url(/img/image2.jpg)");
  } else if (e.keyCode == 51) {
     $('body').css("background-image", "url(/img/image3.jpg)");
  } 
});

另请注意，当您使用 jQuery 时，您可以像这样附加事件：

$(document).on('keyup', function(e){
  if (e.which == 32){
    countdown.start();
  } else if(e.which == 49) {
    $('body').css("background-image", "url(/img/image1.jpg)");
  } else if (e.which == 50) {
    $('body').css("background-image", "url(/img/image2.jpg)");
  } else if (e.which == 51) {
     $('body').css("background-image", "url(/img/image3.jpg)");
  } 
});

Answer 2

你也可以使用switch语句

$(document).on('keyup', function(e){
  switch (e.keyCode) {
    case 32:
        countdown.start();
        break;
    case 49:
         $('body').css("background-image", "url(/img/image1.jpg)");
        break;
    case 50:
          $('body').css("background-image", "url(/img/image2.jpg)");
        break;
    case 51:
         $('body').css("background-image", "url(/img/image3.jpg)");
        break;
  }
}

Answer 3

这里肯定没死...

但是我注意到有几件事是您的括号没有对齐。其次你有点多余，但我的猜测是修复它

document.body.onkeyup = function(e){
    if(e.keyCode == 32){
        countdown.start();
    } 
    if(e.keyCode == 49){
        $('body').css("background-image", "url(/img/image1.jpg)");
    } 
    if(e.keyCode == 50){
        $('body').css("background-image", "url(/img/image2.jpg)");
    } 
    if(e.keyCode == 51){
        $('body').css("background-image", "url(/img/image3.jpg)");
    } 
}

Answer 4

为了更好的方法，请尝试对象的帮助。为 keycode and images 创建对象，然后将 keycode 与相关对象匹配。将 background-image

放置

var image ={
"49":'"url(/img/image1.jpg)',
"50":'"url(/img/image2.jpg)',
"51":'"url(/img/image3.jpg)',
}

document.body.addEventListener('keyup', function(e){
    if (e.keyCode == 32) {
      countdown.start();
    }
     if(Object.keys(image).includes(e.keyCode.toString())){
     $('body').css("background-image", image[e.keyCode.toString()]);
    console.log(image[e.keyCode.toString()])
    }
    
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input>

在关键事件上更改多个背景图像

Change multiple background images on key event

javascript

jquery

css

keyevent