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

这是我目前的画廊：

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

给我看更多

这里有一个镜头：

我只想让

按钮

在单击时加载另一行我放在特定DIV中的图像。

---

主要目标是加载：这意味着我希望在单击之后获得新的图像请求。我认为应该使用jquery DOM来完成这项工作。

这是一个非常基本的问题。您应该阅读关于DOM操作的jQuery文档

回答您的问题：您可以使用在按钮前插入DOM元素：

$(".more").before('<a href="images/big/05.jpg" class="photo"><img alt="" src="images/gallery/05.jpg"></a>')

$（“.more”）。在（“”）之前

别担心，这很容易做到

假设您有另一个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>

---

希望有帮助。

像这样的东西怎么样：

我假设图像只是增加一个

JS:

var num=4；
var增量=4；
$（函数（）{
$（'button.more'）。单击（函数（）{
对于（变量i=0；ivar img=$（'您是否使用ajax获取新的图像集？如果您询问如何通过从服务器或任何其他URL获取图像来加载新图像，那么您可以使用ajax href使用
images/big/0X.jpg
模式，但是src是
images/0X.jpg
。您的代码有点不同。只是一个小错误。我没有注意到差异。H修复完成了，但出现了意外的结果。奇特的效果对新添加的图像不起作用&不知道原因。它们有
class=“photo”
，那为什么呢？然而，作为另一项成就，它可以有一个限制吗？例如，最多只加载20个图像？它现在加载不受限制。我猜您正在用
$（'.photo'）注册一个单击事件。单击（）
。请改用
委派
或
打开
。jQuery对此有很好的记录。我注意到，您希望从服务器加载图像，而不仅仅是简单的显示。在您的解决方案中，图像将随页面加载时间从服务器加载。
 $('.gallery2').show();

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