日期:2014-05-16  浏览次数:20362 次

一小段代码,请求解释。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #box {background-color: #667B99; height: 100px; width: 100px;}
  </style>
  <script>
  var changeStyle = function (elem, attr, value)
  {
    elem.style[attr] = value
  };
  window.onload = function ()
  {
    var oBtn = document.getElementsByTagName("input");
    var oDiv = document.getElementById("box");
    var oAtt = ["width","height","background","display","display"];
    var oVal = ["200px","200px","#2B91D5","none","block"];

    var i = 0;
    for(i=0; i<oBtn.length; i++){
      oBtn[i].index = i;
      oBtn[i].onclick = function(){
        changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
        //请解释oAtt[this.index]和oVal[this.index]中的[this.index]为何不能直接用[i]。
      }
    }
  };
  </script>
</head>
<body>
  <section>
    <input type="button" value="变宽">
    <input type="button" value="变高">
    <input type="button" value="变色">
    <input type="button" value="隐藏">
    <input type="button" value="显示">
    <div id="box"> </div>
  </section>
</body>
</html>


以上是几个按钮控制一个div的简单代码,请解释一下oAtt[this.index]和oVal[this.index]中的[this.index]为何不能直接用[i],而直接用[i]代码是不能运行的。谢谢。

------解决方案--------------------
闭包问题。
用调试器看看i是多少。
 oBtn[i].onclick = function(){
        changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
       i
      }
------解决方案--------------------
闭包问题  那样的话当你点击的时候i已经是oBtn.length了