How to change src of img using jquery

Question

I have dynamically added new li tags and they are suppose to show different images based on the class active which toggles on click, but I just cant get the hold of it. I know that because the image which is supposed to change is in img tag but the condition of changing the src of img tag is active class in li tag

I tried using following code in jquery

if ($("li").hasClass("active"))
{
    $("img#test2").attr("src","assets/img/button_home_selected3.png");
} 
else 
{
    $("img#test2").attr("src","assets/img/button_home_plain.png");
}

Html is:

<li id="test" style="list-style: none;" class="active">
    <a href="#home" data-toggle="tabs"><img src="assets/img/button_home_plain.png" id="test2"  width="83" style="margin-left:10px;"</a>
</li>

Event Handler:

$('.plus').click(function(e) {
e.preventDefault();
var li_count = $('#nav-tabs li').length;
if (li_count <= 3)
if(counter <= 3){
$('#nav-tabs').append('<a href="#tab' + counter + '" data-toggle="tabs"><li style="list-style: none; float:left; margin-left:-5px; width:82px;"><img src="assets/img/button_home_plain.png" width="83" style="margin-left:18px;" /></a></li>');
} else { alert("Only 3 Tabs Allowed!")};

Can you post the `click` handler code where you are changing the class. — Rory McCrossan, Feb 08 '13 at 09:21
Let's see **all** of the relevant code. That would be the HTML the code runs against, as well as the full `click` event handler (which your `if` statement should be inside). — Anthony Grist, Feb 08 '13 at 09:21
Can you provide a (non working) example including HTML, CSS and JS? — David, Feb 08 '13 at 09:23
Possible duplicate of http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery And http://stackoverflow.com/questions/540349/change-the-image-source-using-jquery — Ankit, Feb 08 '13 at 09:23
the event handler is $('.plus').click(function(e) { e.preventDefault(); var li_count = $('#nav-tabs li').length; if (li_count <= 3) if(counter <= 3){ $('#nav-tabs').append('

score 0 · Answer 1 · answered Feb 08 '13 at 09:50

Try this:

...
...
//code where you are changing the class
...
...

$('li').each(function() {
    if($(this).class().indexOf("active") !== -1)
    {
        //Active class is applied
        $(this).children().children().attr("src", "assets/img/button_home_selected3.png");
    }
    else
    {
        $(this).children().children().attr("src", "assets/img/button_home_plain.png");
    }
});

...
...

How to change src of img using jquery

1 Answers1

Linked

Related