for(var i=0;i<sDiv.length;i++){
alert(i);sDiv[i].onmouseover=function(){Content_Div[i].style.display="block";}我想把for循环里面的那个i传递到Content_Div[i]里面的这个i,但是这样子好像传递不进去求解答。。

解决方案 »

  1.   

    能传进去,这是javascript的闭包。 你查查其他的原因吧。
    例子:
    function foo(x) {
      var tmp = 3;
      function bar(y) {
        alert(x + y + (++tmp));
      }
      bar(10);
    }
    foo(2)​
      

  2.   


    for(var i=0;i<sDiv.length;i++){
        sDiv[i].onmouseover=function(x){
            return function(){Content_Div[x].style.display="block"}
        }(i)
    }1.这是循环和事件函数触发不一致(或者不同时)导致的。
    2.可以简单地理解为当触发mouseover事件时,循环中的i已经改变了,至少变为sDiv.length-1。
    3.而mouseover事件函数中用的i依然是外层for循环中的i函数中的i,实际上是外层函数(for所在函数中的i,代码块没有作用域)。
    4.解决办法:闭包。
    再试试下面这段代码:for(var i=0;i<sDiv.length;i++){
        sDiv[i].onmouseover=function(){
            alert(i);
            //Content_Div[i].style.display="block";
        }
    }
    i=1000;//假如最后一次修改i是这里。
      

  3.   

        for(var i=0;i<sDiv.length;i++){
            alert(i);
            sDiv[i].onmouseover=(function(e){
                return function(){
                    Content_Div[e].style.display="block";//引用闭包原理,传入变量i给e
                }            
            })(i)
        }
      

  4.   

    不用闭包的方式,用对象传递,好理解:
    for(var i=0;i<sDiv.length;i++){
    alert(i);
    sDiv[i].index=i; 
    sDiv[i].onmouseover=function(){
     
    Content_Div[this.index].style.display="block";
     
    }
      

  5.   

    如果你的方法是那样绑定的,那么直接
    this.style.display="block" 
      

  6.   

    鼠标滑过导致的样式变化建议用CSS伪类,除非浏览器不支持,比如IE6下。
      

  7.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $("img:gt(0)").hide();
            });
            function showImage(imgID) {
                $("img").each(function () {
                    if ($(this).attr("id") == imgID) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            }
        </script>
    </head>
    <body>
        <img src="images/icon-phone.gif" id="img1" />
        <img src="images/close.gif" id="img2" />
        <img src="images/data-table-th.gif" id="img3" />
        <img src="images/icon-mail.gif" id="img4" />
        <span onmousemove="showImage('img1')">第1张</span> <span onmousemove="showImage('img2')">
            第2张</span> <span onmousemove="showImage('img3')">第3张</span> <span onmousemove="showImage('img4')">
                第4张</span>
    </body>
    </html>不知道是不是你想要的效果
      

  8.   

    看明白楼主的意思了
    for(var i=0;i<sDiv.length;i++){
    alert(i);
     sDiv[i]["cacheData"] = i;
    sDiv[i].onmouseover=function(){
     var _tmp = this["cacheData"];
    Content_Div[_tmp].style.display="block";
     
    }
      

  9.   

    for(var i=0;i<sDiv.length;i++){
    alert(i);
     
    sDiv[i].onmouseover=function(j){
     
        return function() {
            Content_Div[j].style.display="block";
        }
     
    }(i);