Question

这是我目前的画廊：

<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来完成。

Answer 1

这是一个非常基本的问题。您应该阅读有关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>')

Answer 2

不要担心这很容易做到。

假设您有另外一个div，其中包含更多图像，目前已隐藏：

<div class="gallery2" style='display:none'> 
    <a href="images/big/05.jpg" class="photo"><img alt="" src="images/gallery/01.jpg"></a>
    <a href="images/big/06.jpg" class="photo"><img alt="" src="images/gallery/02.jpg"></a>
    <a href="images/big/07.jpg" class="photo"><img alt="" src="images/gallery/03.jpg"></a>
    <a href="images/big/08.jpg" class="photo"><img alt="" src="images/gallery/04.jpg"></a>
    <button class="more">show me more</button>
</div>

要显示div在document.ready事件中运行一行简单的jQuery。

 $('.gallery2').show();

希望有所帮助。

Answer 3

这样的事情：FIDDLE。

我假设图像只是递增一个。

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

创建一个按钮，以便将一组照片添加到图库

3 个答案: