Javascript 按键时更改img源，释放时更改回_Javascript_Jquery_Html

Javascript 按键时更改img源，释放时更改回

javascript jquery html

Javascript 按键时更改img源，释放时更改回,javascript,jquery,html,Javascript,Jquery,Html,我想完成的事情：当用户按下空格键时，图像源应该从SPACEBAR.png更改为SPACEBAR\u pressed.png。当用户释放键时，图像应更改回默认值我到处找了找，尝试了几种可能性，但都没有成功。请记住，我不太擅长Javascript HTML: <!DOCTYPE html> <html lang="sv"> <head> <meta charset="utf-8"> <title></

我想完成的事情：当用户按下空格键时，图像源应该从

SPACEBAR.png

更改为

SPACEBAR\u 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>

您可以将

keypress

和

attr

功能组合起来完成此任务

在回调中，您有一个事件对象，它的属性

，它是keyCode，表示按下的键。空格键的键码是32
在DOM上释放密钥时，url再次显式更改

$（函数（）{
var myRealUrl=”http://hammerjs.github.io/assets/img/stackoverflow-icon.svg";
$（“正文”）。在（“键控键控”上，函数（e）{
如果（e.which==32）{
$（“#空格键”）.attr（“src”https://i.stack.imgur.com/CE5lz.png");
console.log（'pressed'）；
}
});
$（“正文”）.keyup（函数（e）{
如果（e.which==32）{
$（“#空格键”）.attr（“src”，myRealUrl）；
console.log（'released'）；
}
});
});
/*演示使用*/
img{
最大高度：100px；
最大宽度：100px；
}

您的问题中似乎缺少了javascript
。。。到目前为止你试过什么？这不是一个免费的写作服务，所以要给你一个javascript解决方案，你必须有一些javascript供人们使用……我感谢你努力帮助我。我还是不能让它工作。复制你的代码时我有没有做错什么<代码>var myRealUrl=“../assets/spacebar.png”$（“body”）.on（“keydown”，函数（e）{if（e.which==32）{$（“#spacebar”）.attr（“src”，“./assets/spacebar_pressed.png”）}）$（“body”）.keyup（函数（e）{$（“#spacebar”）.attr（“src”，myRealUrl）}）@David检查您的浏览器控制台是否有错误。如果此脚本在head
标记中运行，并且没有将其放在jQuery
的DOM就绪函数中，那么您无疑会在控制台中发现错误。另外，在尝试使用jQuery
库之前，请务必添加该库。是否需要。/
或否？在html文件中，。/
不存在@谢谢你的帮助和提醒我失踪的人part@NewToJS@David将源代码放在jQuery
DOM就绪函数中，如上面的答案所示，这将允许您将脚本
保留在头
标记中jQuery
DOM就绪函数$（函数（）{/*这里的源代码*/}）
$("#spacebar").on("keydown", function(e){
    var code = e.keyCode;
    if(code == 32){
     document.getElementById("spacebar").src="../assets/spacebar_pressed.png";
    }
});