jQuery隐藏/显示ul中的列表元素

Question

我想制作一个处理列表元素“显示更多/更少”的脚本。 我找到了这个脚本：

的HTML

<ul id="myList">
    <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>
</ul>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

的CSS

#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
}
#showLess:hover {
    color:black;
}

JQUERY

$(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();
        if(x<=3){$('#showLess').hide();}
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

https://jsfiddle.net/6FzSb/1550/

现在我想知道JavaScript第6行和第10行是如何工作的，如果显示所有条目，如何隐藏showmore；如果仅显示3个条目，如何隐藏showless？

Answer 1

如果你在问

$('#myList li:lt('+x+')').show();

然后谷歌的“ jQuery选择器LT”。

至于如何显示/隐藏更多/更少的链接：您的代码中包含所有提示-您知道如何计算列表大小（..size（）），如何隐藏和显示DOM元素（..hide （）和..show（）），因此现在有了几个if块，这些块在加载时隐藏“显示较少”，而在点击处理程序中隐藏“显示较多”。

Answer 2

检查此更新的代码，

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

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

}）;

JSFIDDLE

Answer 3

你可以这样子做

var visible = 3;
$("#myList li:lt(" + visible + ")").show();
$("#loadMore").click(function() {
    $("#showLess").show();
    visible = $("#myList li:visible").length + 3;
    $("#myList li:lt(" + visible + ")").show();
    if (visible == $("#myList li").length)
        $(this).hide();
});
$("#showLess").click(function() {
    $("#loadMore").show();
    visible = $("#myList li:visible").length - 3;
    $("#myList li:gt(" + (visible - 1) + ")").hide();
    if (3 == $("#myList li:visible").length)
        $(this).hide();

});

小提琴