Javascript 单击按钮时显示特定数量的图像

我需要加载画廊中的所有图像，但仅显示六个图像。我有一个按钮，用户可以点击，当该按钮被点击，三个以上的图像将加载。我假设这可以通过jQuery实现，但我不知道在加载初始图像后该怎么做

现在我有：

jQuery(document).ready(function () {
    jQuery('.gallery dl:lt(6)').show();

});

这将隐藏除六个以外的所有图像。现在，当我点击一个按钮时，我想显示接下来的三幅图像。再次单击按钮时，将再加载三个图像

编辑：

好吧，我已经大致弄明白了。不幸的是，一次只加载一个映像。如何将其更改为一次加载三个

jQuery(document).ready(function () {
    jQuery('.gallery dl:lt(6)').show();

    jQuery('.more-images').click(function () {
        jQuery('.gallery dl').each(function () {
            if (jQuery(this).css('display') == 'none') {
                jQuery(this).css('display', 'block');
                return false;
            }
        });

    var i = 0;

    jQuery('.gallery dl').each(function () {
        if (jQuery(this).css('display') != 'none') {
            i+3;
        }
    });
    });
});

---

在单击处理程序中，给出以下内容：

jQuery('.gallery dl:not(:visible):lt(3)').show();

小提琴：

---

您还可以通过在显示所有项目后隐藏来改进上述脚本

$('a').click(function () {
    $('.gallery dl:not(:visible):lt(3)').show();
    if ($('.gallery dl:not(:visible)').length == 0)
        $(this).hide();
    return false;
});

---

Fiddle:我建议在服务器端处理图像。例如，在服务器上吐出页面所需的所有图像，在第n个图像之后，在类中的第6个图像之后，向这些图像添加.none类。.none类将显示为：none。但是，如果必须在客户端执行此操作，$（'.gallery dl:gt（6）'）.addClass（'none'）

I代码示例在gallery中显示图像，您可以看到它

$（文档）.ready（函数（）{
$（'.gallery ul li'）.hide（）；
$（'.gallery ul li:lt（5）'）.show（）；
$（'a'）。单击（函数（）{
$（'.gallery ul li:不（：可见）：lt（5）'）.show（）；
返回false；
});
});
。清除{
明确：两者皆有；
}
.画廊{
显示：内联块；
}
.gallery>ul{
显示：内联块；
}
.gallery>ul>li{
浮动：左；
列表样式：无；
宽度：10%；
最大宽度：12.5%；
位置：相对位置；
填充物：5px；
}
.gallery>ul>li:悬停{
背景：#2C30；
过渡：均为0.25秒；
光标：指针；
}
.gallery>ul>li>img{
宽度：100%；
高度：自动；
}
/*Nút Hiể第n条ị 瑟姆*/
.按钮显示图像{
文本对齐：居中；
}
#btn显示{
文字装饰：无；
}
.btn{
填充：6px 12px；
文本对齐：居中；
字体大小：14px；
文本转换：大写；
字体系列：arial；
}
.btn默认值{
颜色：#000；
背景色：#fff；
边框：#000实心1px；
}
.btn默认值：悬停{
背景色：#000；
颜色：#fff；
边框：实心1px#fff；
过渡：均为0.25秒；
}





















谢谢您的帮助！我刚刚对OP进行了编辑。你知道我如何修改代码，使其在单击时显示三幅图像而不是一幅吗？@user715564查看我的小提琴。是的，是的，这太完美了。非常感谢Praveen。@user715564已更新为包含另一个方法，其中隐藏了“更多”按钮。请也检查一下！：）哦，酷。在我看到你更新的方法之前，我已经想出了一个解决方案。最后我使用了
if（jQuery（'.gallery-dl:visible'）.length）
感谢您添加了额外的帮助。