數據加載更多js代碼
阿新 • • 發佈:2017-07-07
else dom src log tle append length charset har
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <button value="查看更多">查看更多</button> </div> <div class="box"></div> <divclass="noMore" style="display: none;">我是有底線的。。。</div> </body> </html>
<script src="js_lib/jquery-1.12.4.min.js"></script> <script> var btn = $("button").get(0); var box = $(".box").get(0); var data = [1,2,3,4,5,6,7,8,9,10]; var howManyToLoad = 4;var loadIndex = 0; var newData = []; btn.onclick = function(){ loadIndex++; loadMore(loadIndex) } function loadMore(loadIndex){ if(loadIndex<Math.ceil(data.length/howManyToLoad)){ newData = data.slice(loadIndex*howManyToLoad,(loadIndex+1)*howManyToLoad);var dom = ""; for(var i=0; i<newData.length; i++){ dom += "<h4>"+newData[i]+"</h4>"; } $(box).append(dom); // 實在忍不住用了jquery }else{ $(".noMore").show(); } } loadMore(loadIndex); </script>
數據加載更多js代碼