Change default image after click event jQuery

Question

I want when I click in the image I get the new but after 1 second I want to get the default. I added the function setTimeout(), but after one second I still have the same image (pressed.svg)

This is all my code :

 <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>

user21926 · Accepted Answer · 2012-10-12 18:25:19Z

2

The problem is that this in your anonymous function call refers to the wrong this. You need to assign the value of this in your handler to a temporary that will be used by the anonymous function:

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

You could accomplish the same thing using just the DOM, since you aren't doing anything jQuery specific:

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

answered Oct 12, 2012 at 18:25

user21926

Sign up to request clarification or add additional context in comments.

Comments

insomiac · Accepted Answer · 2012-10-12 18:25:45Z

0

Demo : 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);
        });

    });

when you do $(this) in setTimeout, it wont work as there is no reference in settime out function. cache the element first and then use it in settimeout.

answered Oct 12, 2012 at 18:25

insomiac

5,6848 gold badges47 silver badges73 bronze badges

Collectives™ on Stack Overflow

Change default image after click event jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related