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

Question

I have an unordered list of img url's that are generated with from a custom post type in wordpress.

I have a slider and am using the number of slides to determine which Image url I want as the background for my element.

Sample of generated list:

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

Sample of my 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'" );
    }
});

When I use console.log() it spits out the right text that is in the <li> tag, but I can't seem to get this to work.

Answer 1

Remove single quotes and !imprtant from background properties. Also dont forget to wrap your function in a DOM ready function

$(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

The previous code is giving me issues and I could not get it to show the image with .each() .

Using a for-loop I was able to get the Section to use the URL as a background based on the slide number:

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

Thank you all for your help.