javascript - 在动态元素上设置背景图像

Question

我试图在动态创建的元素上设置背景图像，但它似乎不起作用。它应该采用我放入数组中的对象的“img”属性，然后将其用作背景图像 url。

Javascript:

var sponsorArray = new Array();

//Sponsor Constructor Function
function Sponsor(name, img, tier, url, description) {
    this.name = name;
    this.img = img;
    this.tier = tier;
    this.url = url;
    this.description = description;

    //A counter for the number of sponsors
    Sponsor.num = (Sponsor.num || 0) + 1;

    //Insert this object into the sponsors array
    sponsorArray.push(this);
};

var sponsor0 = new Sponsor(
    'test sponsor',
    './images/sponsors/test.png',
    'Platinum',
    'test.com',
    'blah blah blah'
);

var initSponsors = function() {
    for (var i = 0; i < sponsorArray.length; i++) {

        var sponsor_image = $('<li>', {
            'class': 'sponsor-logo',
            'id': 'sponsor' + i,
            'background-image': 'url(\'' + sponsorArray[i].img + '\')'
        });

        $('#logo-sponsors').append(sponsor_image);
    }
};

initSponsors();

HTML:

<ul id="logo-sponsors">
</ul>

当我检查该元素时，它似乎应该可以工作？我迷茫了...

https://jsfiddle.net/qmr32463/

Answer 1

"background-image" 是无效的 jQuery 方法。另一方面， .css() 是有效的，所以

而不是

        'background-image' : 'url(\'' + sponsorArray[i].img + '\')'

用途:

        css : {
          backgroundImage: 'url(\'' + sponsorArray[i].img + '\')'
        }

https://jsfiddle.net/qmr32463/1/