Question

javascript问题

html描述 就是有六个li 有六个div 功能就是每个li的鼠标移动事件 是 相对应的div隐藏起来
li[i].onmouseover = function(){div[i].style.display = "none"}
但是我写了一个js 怎样也运行不出来 代码如下
window.onload = function(){
var divs = document.getElementByTagName("div");
var lis = document.getElementByTagName("li");
for(var i =0; i < lis.length;i++){
lis[i].onmouseover = function(){
divs[i].style.dispaly = "none";

}

}

}
这个代码实际运行结果 就是每个li鼠标事件 都是让最后一个div隐藏 请教怎么改正 不要用jQuery
document.getElementsByTagName() 我少写一个字母 不是这里的问题哈

Answer 1

window.onload = function(){
  var lis = document.querySelectorAll('li');
  var divs = document.querySelectorAll('div');

  each(lis , function(li , i){
    li.onmouseover = function(){
      css(divs , 'display' , '');//先将所有div的样式还原
      css(divs[i] , 'display' , 'none');//隐藏对应div
    };
  });
}

function each(els , callback){
  for(var i=0,le; el = els[i] ; i++){
    callback(el , i , els);
  }
}

function css(el , key , val){
  if(el.length && !el.style){
    each(el , function(item){
       css(item , key , val)
    });
  }else if(el.style){
    el.style[key] = value;
  }
}

追问

大神，能请问下我的那个代码 为什么错吗？

追答

变量 i 使用的不对，作用域没有控制好，还有没有清空div它们的显示状态

for(var i=0; i < lis.length; i++){
  (function(i){//这里使用i才是安全的
      var li = lis[i];
      li.onmouseover = function(){  
          divs///这里还需要将它们的状态还原
          divs[i].style.display = 'none';
      }
  }(i));//i从这里传入用来保存起来
}

追问

哦，我意识到这个问题了，不知道怎么解决，这个东西叫做闭包还是叫做什么？
还有就是你刚才写的代码 我用火狐测试了下 控制台有错误

ReferenceError: value is not defined
el.style[key] = value;

追答

哦，手敲的来着， value 改成 val