我希望我的代码通过添加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
是菜单元素的集合。 最佳答案
看,您在做什么至少有两个缺陷:
第一个:执行此操作时:for(i = 0; 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');
});
}
}
编辑
更改了代码,以将迭代器中使用的变量添加为节点属性,从而解决了变量作用域问题。