我正在尝试制作一个程序,该程序获取一个列表并将一个类添加到列表中包含子列表的部分。我遇到的问题是列表正确添加了类,但是当我尝试添加 onclick 事件时,它无法按预期工作。 onclick 有效,但仅适用于找到的列表项的最后一次出现。因此,单击任何蓝色单词来展开或缩小只会导致最后一个列表发生变化。
我认为这与没有 id 使其唯一有关,因此创建的最后一个列表项是受单击事件影响的列表项。
我想在不使用 jquery 或编辑 HTML 的情况下完成此操作。我可以看到这个工作的一种方法是创建一个 ID,但是有没有一种方法可以在没有这种方法的情况下做到这一点?
https://jsfiddle.net/ooa72wLm/
if(innerlist.querySelectorAll('li').length > 0){
tx.innerHTML = tx.innerHTML + ' -';
innerlist.parentElement.querySelector('div').className = 'collapse';
innerlist.parentElement.querySelector('div').addEventListener("click", function(){
if(tx.innerHTML.substr(tx.innerHTML.indexOf(' ')+1) === '-'){
tx.innerHTML = tx.innerHTML.substr(0,tx.innerHTML.indexOf(' ')) +' +';
innerlist.className = 'hide';
innerlist.removeClassName = 'view';
}
else{
tx.innerHTML = tx.innerHTML.substr(0,tx.innerHTML.indexOf(' ')) +' -';
innerlist.className = 'view';
innerlist.removeClassName = 'hide';
}
});
}
最佳答案
这是因为您声明的 2 个变量的范围:
var innerlist = list[i];
var tx = innerlist.parentElement.querySelector('div');
它们是在 for 循环中声明的,但是 var
不是 block 作用域的。这意味着对于循环的每次迭代,都会重新分配值。当点击监听器函数被触发时,这些值就会发生变化。
如果您能够使用 ES6 功能,我建议使用 let
而不是 var
,因为这是 block 作用域。
这是更新的 fiddle :
关于javascript - 可扩展列表未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47818531/