页面加载后如何基于jQuery中的类更改图像源

Question

I'm building an image slider in jQuery to bolster my knowledge of the language. In order to indicate that an image should be shown, I add a "selected" class to that <img> tag. Additionally, in order to indicate that a nav button should be toggled on/off, I add an active / inactive class to that respective li .

Example here:

$(document).ready(function(){
    initPics();
    currentImage = $('.selected').attr('id');


    var navButton = $("li").find("img");
    //show the right image when the nav button is clicked
    $(navButton).on('click',function(){
        $("#"+currentImage).removeClass('selected');
        $("#"+currentImage).addClass('notSelected');

        //change nav button when a different one is clicked
        $('#navigation').children('li').children("img").removeClass('active');
        $('#navigation').children('li').children("img").addClass('inactive');

    });

    if ($("li img").hasClass('active')){
        $(this).find(".active").attr('src','images/button1.png');
    } else {
        $(this).attr('src','images/button2.png');
    }


});

FYI The HTML that I'm working on looks like this:

Navigation buttons:

<ul id="navigation">
            <li><img class="inactive" id="1" src="images/button2.png"></li>

Images in slider

<img src="images/slider1.jpg" id="image-1" class="slider selected">

---

The problem:

Whenever I click a new navigation button and remove the active class from the nav buttons and add the inactive class, it should also change the source of the image from button1.png to button2.png . It does change classes from active to inactive properly, but the img src never changes. Why is this the case?

---

Edit: Link to a demo of what I'm talking about: demo

Answer 1

You have to put the code to change the image inside the click function, otherwise it will be executed only one time: when the page loads. And obviously your image will never change anymore.

Here's the code:

$(navButton).on('click',function(){
    $("#"+currentImage).removeClass('selected');
    $("#"+currentImage).addClass('notSelected');

    //change nav button when a different one is clicked
    $('#navigation').children('li').children("img").removeClass('active');
    $('#navigation').children('li').children("img").addClass('inactive');

    // change image
    $("li img.active").attr('src','images/button1.png');
    $("li img.inactive").attr('src','images/button2.png');
});