Question

我想要完成的任务：当用户按空格键时，图像源应从spacebar.png更改为spacebar_pressed.png。当用户释放密钥时，图像应更改回默认值。

我到处寻找并尝试了几种可能性但没有效果。请记住，我对Javascript不太满意。

HTML：

    <!DOCTYPE html>
<html lang="sv">
    <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/spacebar.js"></script>
</head>
<body>
    <h1>Spacebar Simulator 2017</h1>
    <img src="assets/spacebar.png" id="spacebar">
</body>
</html>

这是我尝试的最新代码：

$("#spacebar").on("keydown", function(e){
    var code = e.keyCode;
    if(code == 32){
     document.getElementById("spacebar").src="../assets/spacebar_pressed.png";
    }
});

Answer 1

您可以合并keypress和attr功能来完成此类任务。

在回调中，您拥有事件对象，其属性which是keyCode，它表示按下的键。空格键的keyCode为32。

当在DOM上释放密钥时，网址会再次显式更改。

＆＃13;

$(function() {
  var myRealUrl = "http://hammerjs.github.io/assets/img/stackoverflow-icon.svg";
  $("body").on("keydown", function(e) {
    if (e.which == 32) {
      $("#spacebar").attr("src", "https://i.stack.imgur.com/CE5lz.png");
      console.log('pressed');
    }
  });

  $("body").keyup(function(e) {
    if (e.which == 32) {
      $("#spacebar").attr("src", myRealUrl);
      console.log('released');
    }
  });
});

＆＃13;

/*Demo Use*/
img {
  max-height: 100px;
  max-width: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://hammerjs.github.io/assets/img/stackoverflow-icon.svg" id="spacebar" />

＆＃13;

按下键时改变img源，释放时改回

1 个答案: