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

Question

我需要加载画廊中的所有图像，但一开始只显示六个。我有一个用户可以单击的按钮，当单击该按钮时，将加载另外三个图像。我认为这可以用 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;
        }
    });
    });
});

Answer 1

在点击处理程序中，给出：

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

小提琴：http: //jsfiddle.net/praveenscience/tSQfa/

---

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

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

小提琴：http: //jsfiddle.net/praveenscience/tSQfa/1/

Answer 2

我建议在服务器端处理图像。例如，在服务器上吐出页面所需的所有图像，然后在您班级中的第 n 个、第 6 个之后，为这些图像添加一个 .none 类。.none 类将是 display:none。但是，如果您必须在客户端执行此操作，则 $('.gallery dl:gt(6)').addClass('none');。

Answer 3

我在画廊中编写示例显示图像，您可以看到它。

$(document).ready(function () {
    $('.gallery ul li').hide();
    $('.gallery ul li:lt(5)').show();
    $('a').click(function () {
        $('.gallery ul li:not(:visible):lt(5)').show();
        return false;
    });
});

.clear{
  clear:both;
}
.gallery{
  display:inline-block;
}
.gallery>ul{
  display:inline-block;
}
.gallery>ul>li{
  float:left;
  list-style:none;
  width:10%;
  max-width:12.5%;
  position:relavtive;
  padding: 5px;
}
.gallery>ul>li:hover{
  background:#2c2c30;
  transition:all 0.25s;
  cursor:pointer;
}
.gallery>ul>li>img{
  width:100%;
  height:auto;
}
/*Nút Hiển Thị Thêm*/
.button-display-image{
  text-align:center;
}
#btn-display{
  text-decoration:none;
}
.btn{
  padding:6px 12px;
  text-align:center;
  font-size:14px;
  text-transform:uppercase;
  font-family:arial;
}
.btn-default{
  color:#000;
  background-color:#fff;
  border:#000 solid 1px;
}
.btn-default:hover{
  background-color:#000;
  color:#fff;
  border:solid 1px #fff;
  transition:all 0.25s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="gallery">
<ul>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
<li><img src="http://taihinhanhdep.xyz/wp-content/uploads/2015/11/anh-dep-cho-dien-thoai-7.jpg"/></li>
</ul>
<div class="clear"></div>
</div>
<div class="button-display-image">
<a id="btn-display" class="btn btn-default" href="#">Hiển thị thêm ảnh</a>
</div>