按下鍵時更改img源，釋放時返回

Question

我要完成的工作：當用戶按下空格鍵時，圖像源應從spacebar.png更改為spacebar_pressed.png 。 當用戶釋放密鑰時，圖像應更改回默認值。

我到處環顧四周，嘗試了幾種可能性，但沒有一種可行。 請記住，我對Java不太滿意。

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為32。

當在DOM上釋放密鑰時，URL再次顯式更改。

 $(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'); } }); });

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

 <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" />

按下鍵時更改img源，釋放時返回

問題描述

1 個解決方案

解決方案1
2 已采納 2017-09-10 22:21:43

按下鍵時更改img源，釋放時返回

問題描述

1 個解決方案

解決方案1 2 已采納 2017-09-10 22:21:43

解決方案1
2 已采納 2017-09-10 22:21:43