javascript dom 绑定事件遇到的小问题，请高手解决

我想一次过绑定事件跟操作的内容，这样做，绑是能绑定，但是不知道为什么最后alert出来的结果是5。大概是循环结束后才走一次function的内容。但如果想要实现我这样子的东东，应该怎么做呢？
ps；我是在做教程，一个css的案例。选择下拉框的值，相应的div的属性就会发生变化。用复杂的方法做是能做，但我觉得这样的方法会更好看更易懂且代码量更少。不过，就失败了。请高手指教，代码如下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.2.6.min.js" ></script>
        <script type="text/javascript" language="javascript">
            window.onload=function(){
                for(var i=1;i<=4;i++){
                    document.getElementById("selFloatDiv"+i).onchange=function(){
                       // document.getElementById("div"+i).style.float=this.value;
                       alert(i);
                    };
                    document.getElementById("selClearDiv"+i).onchange=function(){
                         // document.getElementById("div"+i).style.clear=this.value;
                       alert(i);
                    };
                };
            };
           
        </script>
    </head>
    <body>
        <div style="background:green; width:300px; height:150px;" id="div1">
            div1
            <select id="selFloatDiv1">
                <option value="none">float:none</option>
                <option value="left">float:left</option>
                <option value="right">float:right</option>
            </select>
            <select id="selClearDiv1">
                <option value="none">clear:none</option>
                <option value="left">clear:left</option>
                <option value="right">clear:right</option>
                <option value="both">clear:both</option>
        </select></div>
        <div style="background:red; width:300px; height:150px;" id="div2">
            div2
            <select id="selFloatDiv2">
                <option value="none">float:none</option>
                <option value="left">float:left</option>
                <option value="right">float:right</option>
            </select>
            <select id="selClearDiv2">
                <option value="none">clear:none</option>
                <option value="left">clear:left</option>
                <option value="right">clear:right</option>
                <option value="both">clear:both</option>
        </select></div>
        <div style="background:blue; width:300px; height:150px;" id="div3">
            div3
            <select id="selFloatDiv3">
                <option value="none">float:none</option>
                <option value="left">float:left</option>
                <option value="right">float:right</option>
            </select>
            <select id="selClearDiv3">
                <option value="none">clear:none</option>
                <option value="left">clear:left</option>
                <option value="right">clear:right</option>
                <option value="both">clear:both</option>
        </select></div>
        <div style="background:yellow; width:300px; height:150px;" id="div4">
            div4
            <select id="selFloatDiv4">
                <option value="none">float:none</option>
                <option value="left">float:left</option>
                <option value="right">float:right</option>
            </select>
            <select id="selClearDiv4">
                <option value="none">clear:none</option>
                <option value="left">clear:left</option>
                <option value="right">clear:right</option>
                <option value="both">clear:both</option>
        </select></div>
    </body>
</html>

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="jquery-1.2.6.min.js" ></script>
            <script type="text/javascript" language="javascript">
             function change(obj){
             for(var i=1; i<=4;i++){
             if(obj.id=="selFloatDiv"+i||obj.id=="selClearDiv"+i)
                  {
                     alert(obj.id);
                  }
                 }
             }
            </script>
        </head>
        <body>
            <div style="background:green; width:300px; height:150px;" id="div1">
                div1
                <select id="selFloatDiv1" onchange="change(this)">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv1" onchange="change(this)" >
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
            <div style="background:red; width:300px; height:150px;" id="div2">
                div2
                <select id="selFloatDiv2" onchange="change(this)">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv2" onchange="change(this)">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
            <div style="background:blue; width:300px; height:150px;" id="div3">
                div3
                <select id="selFloatDiv3" onchange="change(this)">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv3" onchange="change(this)">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
            <div style="background:yellow; width:300px; height:150px;" id="div4">
                div4
                <select id="selFloatDiv4" onchange="change(this)">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv4" onchange="change(this)">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
        </body>
    </html>
      

  2.   

    这样写： 
    document.getElementById("selClearDiv"+i).onchange = new Function("alert("+i+")");对每个元素对象的onchange属性指向一个新的Function实例，创建时候不要使用i的引用。
      

  3.   

    试试，下面的代码，未测试
    window.onload=function(){
                    for(var i=1;i<=4;i++){
                      bind(i);
                    };function bind(i){
        document.getElementById("selFloatDiv"+i).onchange=function(){
                           // document.getElementById("div"+i).style.float=this.value;
                           alert(i);
                        };
                        document.getElementById("selClearDiv"+i).onchange=function(){
                             // document.getElementById("div"+i).style.clear=this.value;
                           alert(i);
                        };
    }
      

  4.   

    hi,try this one and good luck<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="jquery-1.2.6.min.js" ></script>
            <script type="text/javascript" language="javascript">
             //============================================
    function GenerateFloatHandler(i){
    return function(){
    //document.getElementById("div"+i).style.float=this.value;
    alert(i);
    };
    }

    function GenerateClearHandler(i){
    return function(){
    //document.getElementById("div"+i).style.clear=this.value;
    alert(i);
    };
    }
             //============================================
            
            
                window.onload=function(){
                    for(var i=1;i<=4;i++){
                        document.getElementById("selFloatDiv"+i).onchange = GenerateFloatHandler(i);
                        document.getElementById("selClearDiv"+i).onchange = GenerateClearHandler(i);
                 }
             }
               
            </script>
        </head>
        <body>
            <div style="background:green; width:300px; height:150px;" id="div1">
                div1
                <select id="selFloatDiv1">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv1">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
            <div style="background:red; width:300px; height:150px;" id="div2">
                div2
                <select id="selFloatDiv2">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv2">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
            <div style="background:blue; width:300px; height:150px;" id="div3">
                div3
                <select id="selFloatDiv3">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv3">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
            <div style="background:yellow; width:300px; height:150px;" id="div4">
                div4
                <select id="selFloatDiv4">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv4">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
        </body>
    </html>
      

  5.   

    感觉好像可以，不过实际上。我的需求并不是这样子。举个例子，我所想要的是选clear:both时，alert出来的是4，无论哪个div alert出来的都是4~因为我要的是它的选择值。本来想起来应该是一个不错的方法，却卡在这里了~谢谢你
      

  6.   


    I'm sorry that it doesn't work as my considering~~~div1 alert 1 div2 alert2 ....is not my considering~
      

  7.   

    在JS里用styleFloat来改变float样式,like this<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="jquery-1.2.6.min.js" ></script>
            <script type="text/javascript" language="javascript">
             //============================================
    function GenerateFloatHandler(i){
    return function(){
    document.getElementById("div"+i).style.styleFloat = this.value;
    };
    }

    function GenerateClearHandler(i){
    return function(){
    document.getElementById("div"+i).style.clear = this.value;
    };
    }
             //============================================
            
            
                window.onload=function(){
                    for(var i=1;i<=4;i++){
                        document.getElementById("selFloatDiv"+i).onchange = GenerateFloatHandler(i);
                        document.getElementById("selClearDiv"+i).onchange = GenerateClearHandler(i);
                 }
             }
               
            </script>
        </head>
        <body>
            <div style="background:green; width:300px; height:150px;" id="div1">
                div1
                <select id="selFloatDiv1">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv1">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
            <div style="background:red; width:300px; height:150px;" id="div2">
                div2
                <select id="selFloatDiv2">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv2">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
            <div style="background:blue; width:300px; height:150px;" id="div3">
                div3
                <select id="selFloatDiv3">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv3">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
            <div style="background:yellow; width:300px; height:150px;" id="div4">
                div4
                <select id="selFloatDiv4">
                    <option value="none">float:none</option>
                    <option value="left">float:left</option>
                    <option value="right">float:right</option>
                </select>
                <select id="selClearDiv4">
                    <option value="none">clear:none</option>
                    <option value="left">clear:left</option>
                    <option value="right">clear:right</option>
                    <option value="both">clear:both</option>
            </select></div>
        </body>
    </html>