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

【问题标题】：I need help switching background images with jQuery我需要帮助使用 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 ，但似乎还是不行。

标签： javascript jquery wordpress image loops

【解决方案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

感谢大家的帮助。

【讨论】：