Question

在加载时显示3个项目（必须显示为＆＃39; 8个中的3个＆＃39;）
点击“显示项目”＆＃39;显示下一个项目（必须显示为＆＃39; 6个中的6个＆＃39;）...对于每次点击都是明智的，直到达到总尺寸。
达到总尺寸后，停用显示项目＆＃39; （例如：如果8个中的8个）。

我使用下面的代码根据点击显示/隐藏li。但是，我不知道如何带来3个8项目的脚本。

感谢您的宝贵意见。

HTML：

<ul class="gallery-items">
    <li class="gallery-item">
        <div class="item">Test1</div>
    </li>
    <li class="gallery-item">
        <div class="item">Test2</div>
    </li>
    <li class="gallery-item">
        <div class="item">Test3</div>
    </li>
    <li class="gallery-item">
        <div class="item">Test4</div>
    </li>
    <li class="gallery-item">
        <div class="item">Test5</div>
    </li>
    <li class="gallery-item">
        <div class="item">Test6</div>
    </li>
    <li class="gallery-item">
        <div class="item">Test7</div>
    </li>
    <li class="gallery-item">
        <div class="item">Test8</div>
    </li>
</ul>

<div class="show-items">
 Showing <span class="item_shown">3</span> out of <span class="item_total">8</span> deals
</div>

JS：

var $items_list = $(".gallery-item li").size();
var $list_item = 3;
$('.gallery-item li:lt(' + $list_item + ')').show();
if($items_list < $list_item){
    $('#load-more').hide();
}

$('.show-items').click(function() {
    $list_item = ($list_item + 3 <= $items_list) ? $list_item + 3 : $items_list;
    $('.gallery-item li:lt(' + $list_item + ')').show();
    $(this).toggle($list_item < $items_list);
});

Answer 1

试试这个：

$(document).ready(function(){

    var i = 3;

    $(".gallery-item").slice(0,3).show(500);

    $(".show-items").on("click",function(){

        if (i < $("li.gallery-item").length) {

            $(".gallery-item").slice(i,i + 3).show(500);

            i = i + 3;
         }
    })
})

这是Demo

显示li的no并禁用div到达总大小

1 个答案: