Question

我想当我点击图片时我得到新的但是1秒后我想得到默认值。我添加了函数setTimeout（），但一秒后我仍然有相同的图像（pressed.svg）

这是我的全部代码：

 <html>
 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script language='Javascript'> 

 $(document).ready(function(){

            $("#myImage").on("click",function() {

                $(this).attr("src","images/pressed.svg");
                setTimeout(function() {
                    $(this).attr("src","images/normal.svg");
                },1000);

            });

        });
        </script>
</head>
  <body>
      <img src="images/normal.svg" id="myImage">    
  </body>
</html>

Answer 1

问题是匿名函数调用中的this引用了错误的this。您需要将处理程序中this的值分配给匿名函数将使用的临时值：

$(document).ready(function() {
    $("#myImage").on("click",function() {
        var me = this;
        $(me).attr("src", "images/pressed.svg");
        setTimeout(function() {
            $(me).attr("src", "images/normal.svg");
        }, 1000);
    });
});

你可以使用DOM完成同样的事情，因为你没有做任何特定于jQuery的事情：

$(document).ready(function() {
    $("#myImage").on("click", function() {
        var me = this;
        me.src = "images/pressed.svg";
        setTimeout(function() {
            me.src = "images/normal.svg";
        }, 1000);
    });
});

Answer 2

演示：http://jsfiddle.net/

JS Fix：

 $(document).ready(function(){
        $("#myImage").on("click",function() {
            var $img = $(this);
            $img.attr("src","images/pressed.svg");
            setTimeout(function() {
                $img.attr("src","images/normal.svg");
            },1000);
        });

    });

当你在setTimeout中执行$（this）时，它不会工作，因为settime out函数中没有引用。首先缓存元素，然后在settimeout中使用它。

单击事件jQuery后更改默认图像

2 个答案: