Question

美好的一天

我想在li元素内的div上动态设置背景图像，这样我就不必单独指定每个div的背景图像....

然而，我的代码（JS）无效。另请参阅我的FIDDLE

HTML：

<div id="imageWrapper">
    <ul>
        <li>
            <div></div> <span></span>

        </li>
        <li>
            <div></div> <span></span>

        </li>
        <li>
            <div></div> <span></span>

        </li>
        <li>
            <div></div> <span></span>

        </li>
    </ul>
</div>

CSS

#imageWrapper ul li div {
    width: 65px;
    height: 65px;
    background-position: center center;
}

JS

$(document).ready(function () {
    var length = 4; //This is the number of images I have to add
    for (i = 0; i < length; i++) {
        $('#imageWrapper ul li div').css('background', 'url(/path/images/' + i '.jpg)');
    }
});

此外，我要加载的图像列表非常大。加载这么多图像并在DOM中填充它们的最佳方法是什么，而不必写出所有的html和css - 那只是愚蠢的

谢谢

Answer 1

您可以使用此代码执行此操作，但如果您需要修改许多元素以更改其背景，则不建议使用JavaScript处理此问题。

$(document).ready(function () {
    $('#imageWrapper ul li').each(function(i){
        $(this)
            .find('div')
            .css('background-image', 'url(/path/images/' + (i+1) + '.jpg)');
    });
});

Answer 2

以下是PHP方法的示例。

<?php 
  echo '<div id="imageWrapper"><ul>';
    $i=4;
      while($i-->0){
       echo '<li class="background-'.$i.'"><div></div><span></span></li>'.PHP_EOL;
      }
  echo '</ul></div>';
?>

它用div和span打印出4 <li> s。您仍然需要使用CSS添加背景。

元素打印出.background-1，.background-2，因此您只需快速轻松地编辑课程即可进行背景更改。

使用jQuery设置背景图像不起作用

2 个答案: