如何改变图像源基于它的类在jQuery中，页面加载后

How to change image source based on its class in jQuery, after the page has loaded

本文关键字：jQuery 加载 于它 何改变 改变 图像      更新时间：2023-09-26

我正在用jQuery构建一个图像滑块，以增强我对该语言的了解。为了指示应该显示图像，我向该<img>标记添加了一个"selected"类。此外，为了指示导航按钮应该打开/关闭，我在各自的li中添加了active/inactive类。

例子:

$(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从未更改。为什么会这样呢?

编辑:

链接到我正在谈论的演示:demo

您必须将更改图像的代码放入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');
});
相关文章：