1

我想在单击图像时获得新的图像，但 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>
4

2 回答 2

2

问题是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);
    });
});
于 2012-10-12T18:25:19.263 回答
0

演示：http: //jsfiddle.net/

JS修复： 

 $(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 中使用它。

于 2012-10-12T18:25:45.237 回答