我有一个在 for
循环中生成的变量 id
。由于某种原因,在 callback
中传递时,id
会从 0 更改为 1。我的猜测是我错误地传递了 id 参数。
refreshMenu: function(mods, callback){
var menu = document.getElementById('menu'),
ul = document.createElement('ul');
menu.innerHTML = '';
menu.appendChild(ul);
for(var id = 0; id < mods.length; id++){
var li = document.createElement('li'),
that = this;
ul.appendChild(li);
li.setAttribute('id', id);
li.innerHTML = mods[id].get('name');
console.log(id); // HERE ---> 0
li.addEventListener('click', function(){
that.selectMenu(li, function(){
console.log(id); HERE ---> //1 ?
that.selectList(id - 1);
});
}, false);
}
callback();
},
selectList: function(id)
var activeList = this.activeList();
console.log(id);
if (activeList.id == id){
return;
}
else if (activeList){
activeList.setAttribute('class', '');
};
var target = document.getElementById(id);
target.setAttribute('class', 'activeList');
},
selectMenu: function(li, callback){
if(li.className == 'activeMenu')
return;
var active = document.getElementsByClassName('activeMenu')[0];
if(active)
active.setAttribute('class', '');
li.setAttribute('class', 'activeMenu');
callback();
},
最佳答案
在 for 循环中构建闭包时,这是一个非常常见的问题。您创建的所有函数都引用同一个id变量,并且for循环改变该变量。
解决此问题的一个简单方法是:创建一个创建这些函数的辅助函数,并让该辅助函数采用自己的参数。
// In the body of the for loop ...
var makeClickFunction = function (li, id) {
return function (){
that.selectMenu(li, function(){
console.log(id);
that.selectList(id - 1);
});
};
};
li.addEventListener('click', makeClickFunction(li, id));
辅助程序对其 id 参数的绑定(bind)会影响 for 循环的绑定(bind),这是一件好事!我们是故意这样做的。我们还捕获li,因为它也需要被保留。
稍后,我们调用makeClickFunction,在for循环中传入当前值。 for 将继续改变它的 id,但是没关系:该改变与 makeClickFunction 闭包上的行为没有关系。
关于javascript - 在 for 循环中错误地传递回调参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12558073/