如何解决按键不会在 jQuery 中的第三次按下时触发功能
我正在尝试使用带有按键事件处理程序的回车键将图像更改为另一个图像。该函数被触发并将图像更改为另一个很好,并在另一个按键(再次输入)上恢复到原始图像也很好,但是当我第三次尝试更改它时,它什么也没做。这意味着当我再次尝试更改原始图像时,它什么也没做。 我试图将 keypress 更改为 keydown 并且还徒劳地使用了 off 功能。谁能告诉我这里出了什么问题:
<script>
$(".logoheader").on("keypress",function(e) {
if(e.which == 13 || e.which == 32){
$(".logoheader").html("SKATE <img class='secondImage' src='./thought.png' align='center' width='100px' alt='logo image' /> STATE");
$(".logoheader").on("keypress",function() {
$(".logoheader").html("SK8 <img class='logoImage' src='./head.png' align='center' width='100px' alt='logo image' /> ST8");
$(".logoheader").off("keypress");
})
}});
function logoShift(){
$(".logoheader").html("SKATE <img class='secondImage' src='./thought.png' align='center' width='100px' alt='logo image' /> STATE");
$(".logoheader").click(function() {
$(".logoheader").html("SK8 <img class='logoImage' src='./head.png' align='center' width='100px' alt='logo image' /> ST8");
$(".logoheader").off("click");
});};
</script>
<html>
<h1 class="logoheader" align="center" onclick="logoShift()" tabindex=0> SK8 <img class="logoImage" src="./head.png" align="center" width="100px" alt="head" /> ST8</h1>
</html>
正如你所看到的,我有一个运行良好的点击功能(logoShift),我什至试图在按键时触发它,但也是徒劳的(它只适用于第一次点击而没有返回到原始图像第二次按键)
解决方法
只需在文档就绪时绑定事件并检查类名:
$(function() {
$(".logoheader").on("keypress",function(e) {
if (e.which == 13 || e.which == 32) {
if ($(this).find('img').hasClass('logoImage')) {
$(this).html("SKATE <img class='secondImage' src='https://brand.jquery.org/resources/jquery-mark-light.gif' align='center' width='100px' alt='logo image' /> STATE");
} else {
$(this).html("SK8 <img class='logoImage' src='https://brand.jquery.org/resources/jquery-mark-dark.gif' align='center' width='100px' alt='logo image' /> ST8");
}
}
});
$(".logoheader").click(function() {
if ($(this).find('img').hasClass('logoImage')) {
$(this).html("SKATE <img class='secondImage' src='https://brand.jquery.org/resources/jquery-mark-light.gif' align='center' width='100px' alt='logo image' /> STATE");
} else {
$(this).html("SK8 <img class='logoImage' src='https://brand.jquery.org/resources/jquery-mark-dark.gif' align='center' width='100px' alt='logo image' /> ST8");
}
});
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。