javascript - Undefined 不是 Dropdown 中的对象

Question

我希望我的代码通过添加 slactive 类来显示菜单，并更改 ddown 集合中的输入值。我有一些代码不起作用，因为控制台说第 9 行上的 ddown[i] 和 slitems[j] 都不是对象，因为它们是未定义的。如何解决这个问题？

var slitems = document.getElementsByClassName('slitem');
    ddown = document.getElementsByClassName('ddown');
for(i=0; i<ddown.length; i++) {
    ddown[i].addEventListener('click', function(){document.getElementById('sl'+i).classList.add('slactive');valueChange()});
}
function valueChange(){
    for(j=0;j<slitems.length;j++){
        slitems[j].addEventListener('click', function(){
            ddown[i].value = slitems[j].value;
            document.getElementById('sl'+i).classList.remove('slactive');
        });
    }
}

附注slitems 是菜单元素的集合。

Answer 1

看，你所做的至少有两个缺陷:

第一个:执行此操作时: for(i=0; i < ddown.length; i++) ...您声明一个名为 i 的全局变量，在循环结束时将具有值 ddown.length;因此，在 valueChange 中，它将始终具有相同的值

第二:i 设置为 ddown.length，这是数组中不存在的位置，因此出现错误。

要解决此问题，请使用 var 将 i 设置为局部变量，并将其作为参数传递:

var slitems = document.getElementsByClassName('slitem');
    ddown = document.getElementsByClassName('ddown');
for(var i=0; i<ddown.length; i++) {
    ddown[i].setAttribute("data-index", i);
    ddown[i].addEventListener('click', function(e){
         var i = e.target.dataset.index;
         document.getElementById('sl'+i).classList.add('slactive');valueChange(i)
    });
}
function valueChange(i){
    for(var j=0;j<slitems.length;j++){
        slitems[j].setAttribute("data-index", j);
        slitems[j].setAttribute("data-index2", i);
        slitems[j].addEventListener('click', function(e){
            var j = e.target.dataset.index;
            var i = e.target.dataset.index2;
            ddown[i].value = slitems[j].value;
            document.getElementById('sl'+i).classList.remove('slactive');
        });
    }
}

编辑

更改了代码以将迭代器中使用的变量添加为节点属性，这应该解决变量范围问题。