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不是块作用域。这意味着对于循环的每次迭代，都会重新分配值。触发click侦听器函数时，值已更改。

如果您能够使用ES6功能，我建议使用let代替var，因为这是块范围。

这是一个更新的小提琴：

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

可扩展列表未按预期工作

1 个答案: