在做一个案例,使用到了动画封装函数animate,并且使用了其中的回调函数,给若干个li绑定点击事件后,想在动画事件之后使用回调函数使li中字体颜色改变。相关代码如下
var span = document.querySelector('span');
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener('mouseenter', function () {
animate(span, this.offsetLeft, function () {
lis[i].style.color = 'white';
});
});
但结果出来却并没有执行:
仔细试错了几次,确认了回调函数并没有书写错误,如果更换为span对象 span.style.color = 'white' 代码则是正确执行的,那么问题便是出在变量名问题上。
所以添加console.log(lis[i]) 在回调函数中,结果为undefined
即可知回调函数的作用域往上