当容器 <a> 类更改时更改 <img> src 属性答案

【问题标题】：Changing <img> src attribute when container <a> class changes当容器 <a> 类更改时更改 <img> src 属性
【发布时间】：2012-04-03 10:37:43
【问题描述】：

我在我的一个项目中使用 NivoSlider，此特定客户要求根据显示的幻灯片更改活动缩略图。我浏览了文档，找不到任何关于更改图像本身的信息，因此我认为最好的选择是使用 Jquery 函数更改图像本身。尽管如此，我仍然坚持如何实现这一目标。

NivoSlider 创建这个 HTML：

<div class="nivo-controlNav">
    // Active Thumbnail Link
    <a class="nivo-control active" rel="0">
        <img alt="" src="images/inactive_wedge.png">
    </a>
    // Inactive Thumbnail Link
    <a class="nivo-control" rel="1">
        <img alt="" src="images/inactive_wedge.png">
    </a>
</div>

插件将active 类添加到正在显示的图片幻灯片的<a>。

当active 类应用于<a> 标记时，我正在尝试更改包含<img> 的源属性以显示“active_wedge.png”。

我将如何使用 Jquery 实现这一点？（这种时候我才意识到我知道的太少了！）

我已经尝试了一些类似的方法：

if ($('.nivo-control').hasClass('active')) {
    // Not really sure what to put here at all
}

这是正确的，还是我处理得不好？

提前致谢。

附加 JS：

$(window).load(function() {
    $('#theslides').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed: 500, // Slide transition speed
        pauseTime: 3500, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: false, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: true, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: true, // Use image rel for thumbs
        keyboardNav: false, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){
            // Putting code to change the thumbnail image in here
            if ($('.nivo-control').hasClass('active')) {
                $('.nivo-control .active img').attr('src','images/active_wedge.png');
            }
        }, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

【问题讨论】：

标签： jquery nivo-slider

【解决方案1】：

不使用 if hasclass just:

   $('.nivo-control.active img').attr('src','images/active_wedge.png')

【讨论】：

我玩过这个，似乎根本无法让它工作，我已经在插件的事件函数中尝试过它（在幻灯片更改时）并作为单独的 .change事件。但没有变化。
@DavidBarker 你能提供你的js脚本吗
@DavidBarker .nivo-control 和 .active 之间没有空格应该是：$('.nivo-control.active img')
谢谢mgraph！我之前也添加了这一行：$('.nivo-control img').attr('src','images/inactive_wedge.png'); 不确定这是否是确保它恢复的一种非常好的方法，但您的帮助非常宝贵。再次感谢。

【解决方案2】：

if ($('.nivo-control').hasClass('active')) {
   $(this).find('img').attr('src','yourSOURCE')
}

【讨论】：