0

それは私の現在のギャラリーです：

<div class="gallery">
   <a href="images/big/01.jpg" class="photo"><img alt="" src="images/gallery/01.jpg"></a>
   <a href="images/big/02.jpg" class="photo"><img alt="" src="images/gallery/02.jpg"></a>
   <a href="images/big/03.jpg" class="photo"><img alt="" src="images/gallery/03.jpg"></a>
   <a href="images/big/04.jpg" class="photo"><img alt="" src="images/gallery/04.jpg"></a>
   <button class="more">show me more</button>
</div>

ここにショットがあります：http://i.stack.imgur.com/24K7n.png

buttonクリックしたときに、特定のDIVに入れた別の画像行をロードしたいだけです。

主な目標は読み込みです。これは、クリック直後に新しい画像リクエストを取得したいということです。jquery DOM を使用して行う必要があると思います。

4

3 に答える 3

0

このようなものはどうですか: FIDDLE .

私は、画像が単に1ずつ増加すると仮定しています。

JS:

var num = 4;
var incr = 4;
$(function() {
    $('button.more').click(function(){
        for (var i = 0; i < incr; i++){
            num++;
            var a = $('<a class="photo"></a>')
                .attr('href', 'images/big/' + padLeft(num.toString(), '0', 2) + '.jpg');
            var img = $('<img alt="" />')
                .attr('src', 'images/gallery/' + padLeft(num.toString(), '0', 2) + '.jpg');
            a.append(img);
            a.insertBefore($(this));
        }
    });
});

function padLeft(str, pad, len) {
    var val = str;

    while (val.length < len)
        val = pad + val;    

    return val;
}
于 2013-09-08T10:26:08.543 に答える
0

これは非常に基本的な質問です。DOM 操作に関する jQuery ドキュメントを読む必要がありますhttp://api.jquery.com/category/manipulation/

あなたの質問に答えるには:beforeボタンの前に DOM 要素を挿入するために使用できます:

$(".more").before('<a href="images/big/05.jpg" class="photo"><img alt="" src="images/gallery/05.jpg"></a>')
于 2013-09-08T10:20:19.447 に答える