我用手柄模板替换了我的html文件中的内容。现在,我有这个js代码
function init() {
var elements = document.getElementsByTagName('li');
console.log("before click");
console.log(elements);
pullData();
var arr = [].slice.call(elements);
console.log(arr);
for (var i = 0; i < arr.length; i++) {
console.log("before click");
arr[i].addEventListener("click", function() {
console.log("after click");
for (var j = 0; j < arr.length; j++) {
arr[j].classList.remove('selected', 'no-hover');
}
var contentList = document.querySelectorAll('.show');
console.log(contentList);
for (var k = 0; k < contentList.length; k++) {
contentList[k].classList.remove('show');
}
document.getElementById('right').style.display = 'block';
var id = this.id;
console.log(id);
var targetElements = document.querySelectorAll('.' + id);
console.log(targetElements);
for (var x = 0; x < targetElements.length; x++) {
targetElements[x].classList.add('show');
}
this.classList.add('selected', 'no-hover');
});
}
}
在使用handelbars模板之前工作正常,因为它返回了一个节点列表,我能够迭代元素并为每个元素添加一个单击。
使用把手后,我的elements
是一个HTMLcollection,我尝试转换为数组,但我得到一个空数组。
我有以下问题。把手是否导致了这种变化?(返回HTMLcollection而不是节点列表)或者,我只是连接两个不同的东西?
为什么我得到一个空数组?
答案 0 :(得分:0)
所以,我已经通过一些帮助解决了这个问题。
我得到一个空数组的原因是因为我的JS代码试图在构建模板的把手之前转换HTMLcollection。
我通过显示出现为零的HTMLcollection的长度来检查这一点。
所有,我必须做的就是确保在把手模板完成其过程之后将集合转换为数组。