javascript - 可扩展列表未按预期工作

Question

我正在尝试制作一个程序，该程序获取一个列表并将一个类添加到列表中包含子列表的部分。我遇到的问题是列表正确添加了类，但是当我尝试添加 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';
        }
    });
}

Answer 1

这是因为您声明的 2 个变量的范围:

var innerlist = list[i];
var tx = innerlist.parentElement.querySelector('div');

它们是在 for 循环中声明的，但是 var 不是 block 作用域的。这意味着对于循环的每次迭代，都会重新分配值。当点击监听器函数被触发时，这些值就会发生变化。

如果您能够使用 ES6 功能，我建议使用 let 而不是 var，因为这是 block 作用域。

这是更新的 fiddle :

https://jsfiddle.net/ooa72wLm/1/