按键不会在 jQuery 中的第三次按下时触发功能

如何解决按键不会在 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");
   }

 });
});

https://jsfiddle.net/agy0jw58/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?