我需要帮助使用 jQuery 切换背景图像

Posted 2023-05-09

【中文标题】我需要帮助使用 jQuery 切换背景图像

【英文标题】：I need help switching background images with jQuery

【发布时间】：2015-06-02 09:56:02

【问题描述】：

我有一个从 wordpress 中的自定义帖子类型生成的 img url 的无序列表。

我有一个滑块，并且正在使用幻灯片的数量来确定我想要哪个图像 url 作为我的元素的背景。

生成列表示例：

<ul class="tes-image-links">
    <li>http://img-url1</li>
    <li>http://img-url2</li>
    <li>http://img-url3</li>
</ul>

我的 jQuery 示例

$('.cycle-slideshow').find('.cycle-slide').each(function(i)
    if (  $(this).hasClass('cycle-slide-active') )
        var apimglink = $('.tes-image-links').children('li').eq(i).text();
        $('.ap-testimonial.img-back').css("background" , "'url('"+apimglink+"') !important'" );
    
);

当我使用 console.log() 时，它会吐出 <li> 标记中的正确文本，但我似乎无法让它工作。

【问题讨论】：

试试"url('"+apimglink+"') !important"，另外我认为你不需要important，因为.css()会添加内联样式。

谢谢，我试过不带 !important 和带 important ，但似乎还是不行。

【参考方案1】：

从背景属性中删除单引号和 !imprtant。也不要忘记将你的函数包装在一个 DOM 就绪函数中

$(document).ready(function()
    $('.cycle-slideshow').find('.cycle-slide').each(function(i)
        if (  $(this).hasClass('cycle-slide-active') )
        var apimglink = $('.tes-image-links').children('li').eq(i).text();
        $('.ap-testimonial .img-back').css("background" , "url('"+apimglink+"')" );

        

    );
    )

【讨论】：

您好，感谢您的回复。我把它包裹在 $(window).load(function());我试过把你给我的东西放进去，但还是没有运气。当我执行console.log() 时，它会返回与幻灯片对应的img url，但它没有在后台用于ap-testimonial.img-back。此外，当幻灯片更新和新幻灯片 hasClass('cycle-slide-active') 时，它不会更新，并且我没有在控制台中从我的 console.log(apimglink) 收到新的 img url。

我不知道什么是.ap-testimonial.img-back 类？如果他们是孩子和父母，他们之间需要一个空格： .ap-testimonial .img-back

您也有条件检查元素是否具有类“循环幻灯片活动”。似乎您有一个幻灯片，它会在几秒钟后发生变化。因此，您需要在每次更改时调用此函数，而不是仅在 $(window).load

是同一个元素。它不起作用，所以我试图更具体。它有多个类名。 “.ap-testimonial.img-back”。所以应该是 $(document).on('change', 'cycle-slide', function() )？我会试一试，但它不应该至少对第一张幻灯片起作用，因为变量正在存储第一张幻灯片的 img url 有 .cycle-slide-active 吗？

如果这些类名没有用在页面的其他元素中，一个类就足够了。

【参考方案2】：

之前的代码给我带来了问题，我无法让它显示带有.each() 的图像。

使用 for 循环，我能够根据幻灯片编号让该部分使用 URL 作为背景：

var cycleSlide = $('.cycle-slideshow').find('.cycle-slide');
for (i = 0; i < cycleSlide.length; i++)  

    if (cycleSlide.eq(i).hasClass('cycle-slide-active'))
        var apimglink = $('.tes-image-links').children('li').eq(i).text();
        apimglink = apimglink.replace("http://localhost", "");
        $('.ap-testimonial').css('background-image', 'url(' + apimglink + ')');
        console.log(apimglink);

     //End If

; //End For

感谢大家的帮助。