我有一個(gè)無(wú)序列表：<ul id="myList"></ul><div id="loadMore">Load more</div>我希望用另一個(gè)HTML文件中的列表項(xiàng)填充此列表：<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個(gè)列表項(xiàng)，然后在用戶(hù)單擊“加載更多” div時(shí)顯示后5個(gè)項(xiàng)：$(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(); });});不過(guò)，我需要幫助，因?yàn)槲蚁Ｍ凹虞d更多”以顯示接下來(lái)的5個(gè)列表項(xiàng)，但是如果HTML文件中有更多列表項(xiàng)，則再次顯示“加載更多”的div并允許用戶(hù)顯示下一個(gè)5個(gè)項(xiàng)目，重復(fù)此操作直到顯示整個(gè)列表。我怎樣才能最好地做到這一點(diǎn)？我創(chuàng)建了以下jsfiddle：http : //jsfiddle.net/nFd7C/
3 回答
HUWWW
TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊
表達(dá)式$（document）.ready（function（）在jQuery3中已棄用。
在這里查看使用jQuery 3的方法
考慮到我沒(méi)有顯示按鈕。
這是代碼：
JS
$(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();
});
});
的CSS
#myList li{display:none;
}
#loadMore {
color:green;
cursor:pointer;
}
#loadMore:hover {
color:black;
}
添加回答
舉報(bào)
0/150
提交
取消