Question

我有一个无序的img url列表，它是使用wordpress中的自定义帖子类型生成的。

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

生成列表的示例：

<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>标记中的正确文字，但我似乎无法使其生效。

Answer 1

从背景属性中删除单引号和！important。另外，不要忘记将您的函数包装在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+"')" );

        }

    });
    })

Answer 2

之前的代码给了我一些问题，我无法通过.each()显示图片。

使用for-loop我能够让Section使用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

谢谢大家的帮助。

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

2 个答案: