0

再会

我想在 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 的最佳方法是什么——这太愚蠢了

谢谢

4

2 回答 2

0

这是 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>';
?>

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

元素打印出来.background-1, .background-2，因此您可以通过快速轻松地编辑类来更改背景。

于 2013-02-28T20:22:46.027 回答
0

您可以使用此代码来完成此操作，但如果您必须修改那么多元素以更改其背景，则不建议使用 JavaScript 处理此问题。

$(document).ready(function () {
    $('#imageWrapper ul li').each(function(i){
        $(this)
            .find('div')
            .css('background-image', 'url(/path/images/' + (i+1) + '.jpg)');
    });
});
于 2013-02-28T19:50:11.510 回答