CODEWITHSUNDEEP
jquery
user2471553
user2471553

Reputation: 89

img src attribute change using jquery

I am trying to change the image based on the click. Like alternating clicks should have different image source. Something like a slideToggle. I saw that some people use toggleClass, but is there another way to achieve this?

My Code is as follows:

    $(document).ready(function(){
        $("img").click(function(){
            if ($("img").attr("src","down.png"))
            {
                $(this).attr("src","up.png");
            }

            else if ($("img").attr("src","up.png"))
            {
                $(this).attr("src","down.png");
            }
           })

    })

But unfortunately its not going into the else if loop.

Upvotes: 0

Views: 4028

Answers (4)

Spokey
Spokey

Reputation: 10994

Try 

$(document).ready(function(){
    $("img").click(function(){
        var t = $(this);
        if (t.attr("src") == "down.png") {
            t.attr("src","up.png");
        }

        else if (t.attr("src") == "up.png") {
            t.attr("src","down.png");
        }

       });
});

I would probably simplify it to

$(document).ready(function(){
     $("img").click(function(){
        var rc =  $(this).attr("src") == "down.png" ? 'up.png' : 'down.png';
         $(this).attr("src", rc);
     });
});

That line translates to something like this

var variable = (if statement true) ? (give value for true) : (give value for false)

The value is then directly saved in the variable

Upvotes: 0

Barmar
Barmar

Reputation: 782285

In addition to the fixes that other answers have made, you also need to use $(this) throughout the function. $("img").attr("src") will get the src of the first image on the page, not the one that was clicked on.

$(document).ready(function(){
    $("img").click(function(){

        if ($(this).attr("src") == "down.png") {
            $(this).attr("src","up.png");
        }

        else if ($(this).attr("src") == "up.png") {
            $(this).attr("src","down.png");
        }

    })
})

Upvotes: 1

MrCode
MrCode

Reputation: 64536

You aren't testing for the match in the if, also use .prop() not .attr() for the src.

Also you need to use $(this) inside the click handler, not $('img').

$(document).ready(function(){
    $("img").click(function(){
        if ($(this).prop("src") == "down.png") {
            $(this).prop("src","up.png");
        } else if ($(this).prop("src") == "up.png") {
            $(this).prop("src","down.png");
        }
    });
})

Upvotes: 0

tymeJV
tymeJV

Reputation: 104795

Your if condition is wrong, you need a boolean expression:

if ($("img").attr("src") == "down.png") {
...
} else if ($("img").attr("src") == "up.png") {
..
}

Your original check of $("img").attr("src","down.png") is actually setting the image source to down.png, not checking for it.

Also, I believe you actually want this:

if ($(this).attr("src") == "down.png") {
...
} else if ($(this).attr("src") == "up.png") {
..
}

Your code will only evaluate the first image's source (of all the images on your page), this code checks the source of the clicked image.

Upvotes: 1

Related Questions