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

Question

我正在jQuery中构建图像滑块，以增强我对该语言的了解。 为了指示应该显示图像，我向该<img>标签添加了一个“ selected”类。 另外，为了指示应打开/关闭导航按钮，我向相应的li添加了一个活动 / 非活动类。

这里的例子：

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


});

仅供参考 ，我正在处理的HTML如下所示：

导航按钮：

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

滑块中的图像

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

---

问题：

每当我单击一个新的导航按钮并从导航按钮中删除active类并添加inactive类时，它也应将图像源从button1.png为button2.png 。 确实确实将类从active更改inactive ，但是img src从未更改。 为什么会这样呢？

---

编辑：链接到我正在谈论的演示 ： 演示

Answer 1

您必须将代码更改为在click函数中更改图像，否则它将仅执行一次：页面加载时。 很显然，您的形象将永远不会改变。

这是代码：

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