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();

然后google for'jquery selector lt'。

关于如何显示/隐藏显示更多/更少的链接：您拥有代码中的所有提示 - 您知道如何计算列表大小（..size（）），如何隐藏和显示DOM元素（ ..hide（）和..show（））所以现在有几个if块可以隐藏'show less'加载并隐藏点击处理程序中的“show more”。

Answer 2

检查此更新的代码，

From tableA a join tableB b
on substring(a.colPhoneExt, len(a.colPhoneExt)-7) = b.ext

}）;

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();

});

Fiddle

jquery隐藏/显示来自ul的列表元素

3 个答案: