1

画像をクリックすると新しいものが取得されますが、1秒後にデフォルトが取得されます。関数 setTimeout() を追加しましたが、1 秒後も同じ画像 (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);
    });
});

jQuery 固有のことを何もしていないので、DOM だけを使用して同じことを達成できます。

$(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 に答える