[英]Load more list items using forEach
我有一個列表,每次我單擊一個按鈕時,它都會加載列表中的更多項目,但是當我使用循環從數組中獲取列表時,代碼將不起作用!
.hideclass {
position: absolute;
overflow: hidden;
display: none;
}
<ul></ul>
<div id="loadmore">MORE</div>
const array = ['A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A','A']
const list = document.querySelector('ul'),
items = list.querySelectorAll('li'),
buttonloadmore = document.querySelector('#loadmore'),
maxItems = 10,
hideclass = "hideclass";
//Generate liste
output = ''
array.forEach(item => {
output += `<li class="item"> </li>`;
})
list.innerHTML = output;
[].forEach.call(items, (item, index) => {
if (index > maxItems - 1) {
item.classList.add(hideclass);
}
});
buttonloadmore.addEventListener('click', () => {
[].forEach.call(document.querySelectorAll('.' + hideclass), (item, index) => {
if (index < maxItems - 1) {
item.classList.remove(hideclass);
}
if ( document.querySelectorAll('.' + hideclass).length === 0) {
buttonloadmore.style.display = 'none';
}
});
});
沒有數組jsfiddle的工作示例
有什么方法可以處理動態列表? 或使用按鈕限制forEach
循環?
document.querySelectorAll
返回在您調用文檔時位於文檔中的節點組成的數組。 在您的情況下,您查詢<li>
,但是由於未添加<li>
卻找不到任何內容,因此arraylike items
為空。 然后添加一些<li>
但items
將保持空白。
添加節點后,應查詢節點。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.