新JS 显示或隐藏更多内容并显示更少

Question

我有一个无序列表：

<ul id="myList"></ul>
<div id="loadMore">Load more</div>

我希望使用其他HTML文件中的列表项填充此列表：

<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>

我想加载前3个列表项，然后在用户点击“加载更多”div时显示接下来的5个项目：

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#loadMore').click(function () {
        $('#myList li:lt(10)').show();
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});

我需要帮助，因为我希望“加载更多”来显示接下来的5个列表项，但如果HTML文件中有更多列表项，则再次显示“加载更多”div并允许用户显示接下来的5个项目，重复此项，直到显示整个列表。

我怎样才能最好地实现这一目标？

我创建了以下jsfiddle：http://jsfiddle.net/nFd7C/

Answer 1

警告：jQuery 1.8中已弃用size()并在jQuery 3.0中删除，请改用<{1}}

工作演示：http://jsfiddle.net/cse_tushar/6FzSb/

.length

新JS 显示或隐藏更多内容并显示更少

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

<强> CSS

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('#myList li:lt('+x+')').show();
         $('#showLess').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
        $('#loadMore').show();
         $('#showLess').show();
        if(x == 3){
            $('#showLess').hide();
        }
    });
});

工作演示：http://jsfiddle.net/cse_tushar/6FzSb/2/

Answer 2

简单而且变化不大。并且在加载整个列表时也会隐藏更多负载。

jsFiddle here。

$(document).ready(function () {
    // Load the first 3 list items from another HTML file
    //$('#myList').load('externalList.html li:lt(3)');
    $('#myList li:lt(3)').show();
    $('#showLess').hide();
    var items =  25;
    var shown =  3;
    $('#loadMore').click(function () {
        $('#showLess').show();
        shown = $('#myList li:visible').size()+5;
        if(shown< items) {$('#myList li:lt('+shown+')').show();}
        else {$('#myList li:lt('+items+')').show();
             $('#loadMore').hide();
             }
    });
    $('#showLess').click(function () {
        $('#myList li').not(':lt(3)').hide();
    });
});

Answer 3

jQuery3中已弃用表达式$（document）.ready（function（）。

请参见使用 jQuery 3 here

考虑到我没有包含“无显示”按钮。

代码如下：

JS

public class BaseVarDef<T>
{
    public string DeveloperDescription { get; set; } = "";

    public T Value { get; private set; }

    public void SetValue(T value)
    {
        Value = value;
    }

    public void SetValue(BaseVarDef<T> value)
    {
        Value = value.Value;
    }

    public void ApplyChange(T amount)
    {
        AddToValue(amount);
    }

    public void ApplyChange(BaseVarDef<T> amount)
    {
        AddToValue(amount.Value);
    }

    private void AddToValue(T amount)
    {
        dynamic amt = amount;
        dynamic val = Value;

        // Empty catch to avoid runtime exception if 'T' doesn't support the '+' operator
        try { Value = amt + val; }
        catch { }           
    }
}

CSS

$(function () {
    x=3;
    $('#myList li').slice(0, 3).show();
    $('#loadMore').on('click', function (e) {
        e.preventDefault();
        x = x+5;
        $('#myList li').slice(0, x).slideDown();
    });
});

jQuery加载前3个元素，单击“加载更多”以显示下5个元素

3 个答案:

新JS 显示或隐藏更多内容并显示更少