0

良い一日

各 div の背景画像を個別に指定する必要がないように、li 要素内の div に背景画像を動的に設定したい....

ただし、私のコード (JS) は機能しません。私のフィドルも見てください

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)');
    }
});

また、ロードしたい画像のこのリストはかなり大きいです。すべてのhtmlとcssを書き出すことなく、非常に多くの画像をロードしてDOMに取り込む最良の方法は何ですか-それはばかげています

ありがとうございました

4

2 に答える 2

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 に答える
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 に答える