使用jQuery設置背景圖片不起作用

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> 。 您仍然必須使用CSS添加背景。

元素將打印出.background-1 ， .background-2 ，因此您可以通過快速輕松地編輯類來進行背景更改。