我有一个列表,每当我单击一个按钮时,它就会加载列表中的更多项目,但是当我使用循环从数组中获取列表时,代码将不起作用!
.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
循环?
答案 0 :(得分:0)
document.querySelectorAll
会在您调用 时返回类似于数组的节点。在您的情况下,您查询<li>
,但是由于未添加<li>
,但您什么也没找到,因此items
arraylike为空。然后,您添加了一些<li>
,但items
将保持空白。
添加节点后,应查询节点。