在jQuery中第三次按下按键不会触发功能答案

【问题标题】：keypress won't trigger function on 3rd press in jQuery在jQuery中第三次按下按键不会触发功能
【发布时间】：2021-04-23 03:40:08
【问题描述】：

我正在尝试使用带有 keypress 事件处理程序的 enter 键将图像更改为另一个图像。该功能被触发并将图像更改为另一个很好，并在另一个按键（再次输入）上恢复到原始图像也很好，但是当我第三次尝试更改它时它什么也没做。这意味着当我再次尝试更改原始图像时，它不会做任何事情。我试图将 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）工作正常，我什至尝试在按键时触发它，但也是徒劳的（它只适用于第一次点击，而不会返回到原始图像第二次按键）

【问题讨论】：

标签： html jquery event-handling keypress

【解决方案1】：

只需在准备好的文档上绑定事件并检查类名：

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

 });
});

https://jsfiddle.net/agy0jw58/

【讨论】：

谢谢，你救了我的命，效果很好，如果我不花时间，你能解释一下为什么我需要这样做