0

私は590枚の写真を含むディレクトリを持っていますが、私の問題は、そのディレクトリからjqueryだけを使用して画像をプルでき、jquery/javascriptを使用して単独で実行できないことがわかった画像を追加できることです。または、写真の名前を1.jpg、2.jpg...590.jpgに変更しました。jqueryを使用してdivに590枚の画像を追加するには、追加された要素の番号をsrc'lq'+numberofappended+'.jpg'とclassに適用したままにする方法を教えてください。'image-'+numberofappended

結果として私に以下を残します

<div class="imagecontainer">
<img src="lq/1.jpg" class="image-1"/>
<img src="lq/2.jpg" class="image-2"/>
<img src="lq/3.jpg" class="image-3"/>
...
<img src="lq/590.jpg" class="image-590"/>
</div>

私が持っているものが広すぎる場合は、一度に50枚の画像を追加し、ページの最後に到達するたびにさらに50枚をロードするjqueryページ付けを適用できますか。

私は個人的にjqueryでappendを使用する方法を知っていますが、画像を個別に追加する方法と、それをsrcとクラスに適用する追加番号によってはわかりません。

4

3 に答える 3

1

画像htmlの配列を作成します。

var imgs=[];
for( i=1; i<= 590; i++){
    imgs.push('<img src="lq/'+i+'/.jpg" class="image-'+i+'"/>')
}

今、あなたはそれらすべてを追加することができます：

 $('.imagecontainer').html(imgs.join(''));

または、UIで最適に機能するもの（スクロールイベントなど）に基づいて、ロードをずらすことができます。配列の一部を取得してappend（）に使用するには、slice（）を使用します

最初の50を追加：

  var first50= imgs.slice(0,50);
 $('.imagecontainer').html(first50.join(''));
于 2012-06-18T21:12:00.673 に答える
0

forループでうまくいくはずです。

var images = "";
for (var i = 1; i <= 5; i++) {
    images += '<img src="lq/'+i+'.jpg" class="image-'+i+'"/>'
}

$('.imagecontainer').append(images);

出力

<div class="imagecontainer">
    <img src="lq/1.jpg" class="image-1">
    <img src="lq/2.jpg" class="image-2">
    <img src="lq/3.jpg" class="image-3">
    <img src="lq/4.jpg" class="image-4">
    <img src="lq/5.jpg" class="image-5">
</div>

デモ

于 2012-06-18T21:05:51.310 に答える
0

どうぞ; 画像を配列に保存し、それらを結合して、一度にすべて追加します。

var images = [];

for (var i = 1; i <= 50; i++) {
    images.push('<img src="lq/'+i+'.jpg" class="image-'+i+'"/>');
}

$('.imagecontainer').append(images.join('\n'));
于 2012-06-18T21:08:32.153 に答える