我有一個無序列表：<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/
3 回答
HUWWW
TA貢獻1874條經驗 獲得超12個贊
表達式$（document）.ready（function（）在jQuery3中已棄用。
在這里查看使用jQuery 3的方法
考慮到我沒有顯示按鈕。
這是代碼：
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;
}
- 3 回答
- 0 關注
- 786 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消