qq_32679815
子弹与信仰
采纳率100%
2017-03-18 13:54 阅读 1.3k

关于javascript中一个页面锁死问题(左右选中小程序)

20
<head>
    <meta charset="UTF-8">
    <title>左右选中</title>
    <style>
        input[type='button'] {
            width: 50px;
        }
    </style>
    <script>
        //获取左右两个select 框的对象

        //向右边的第一个按钮的功能

        function toRight2() {
            var selectLeftObj = document.getElementById("left");
            var selectRightObj = document.getElementById("right");
            var arr = selectLeftObj.options;
            //遍历数组
            /*for(var i = 0; i < arr.length; i++) {
                if(arr[i].selected) {
                    selectRightObj.appendChild(arr[i]);
                    i--;
                }
            }*/
            //此时打开页面会卡死   上面的不会
            for(var i = 0; i < arr.length; ) {
                if(arr[i].selected) {
                    selectRightObj.appendChild(arr[i]);

                }
            }
        }
        //向右边第三个按钮的功能
        function toRight3() {
            var selectLeftObj = document.getElementById("left");
            var selectRightObj = document.getElementById("right");
            var arr = selectLeftObj.options;
            for(var i = 0; i < arr.length;) {
                selectRightObj.appendChild(arr[i]);
            }
        }

    </script>
</head>

<body>
    <table>
        <tr>
            <td>
                <select id="left" multiple="ture" style="width:100px" size="10">
                    <option>環</option>
                    <option>芈</option>
                    <option>琅</option>
                    <option>琊</option>
                    <option>爨</option>
                    <option>甄</option>
                    <option>槑</option>
                    <option>夔</option>
                </select>
            </td>
            <td>
                <input type="button" value=">" id="toRight1" onclick="toRight1()"><br>
                <input type="button" value=">>" id="toRight2" onclick="toRight2()"><br>
                <input type="button" value=">>>" id="toRight3" onclick="toRight3()"><br><br>
                <input type="button" value="<" id="toLeft1" onclick="toLeft1()"><br>
                <input type="button" value="<<" id="toLeft2" onclick="toLeft2()"><br>
                <input type="button" value="<<<" id="toLeft3" onclick="toLeft3()">
            </td>
            <td>
                <select id="right" multiple="true" style="width:100px" size="10">

                </select>
            </td>
        </tr>
    </table>
</body>

方便浏览代码 我把html标签去掉了 ,想请问大神的是 上方 function toRight2()
中代码执行的问题 加注释的部分可以顺利执行,但是根据function toRight3()中的代码 类比到2时 发现页面会卡死,想不通是为什么。求大神给解释一下啊。。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2017-03-19 06:44
             function toRight3() {
                var selectLeftObj = document.getElementById("left");
                var selectRightObj = document.getElementById("right");
                var arr = selectLeftObj.options;//这个是特殊的DOM数组,你下面append到其他对象后,这个arr DOM数组长度会自动减少,所以不会死循环,for中不需要i++,如果你执行i++会遍历不完所有的option,只能一般,因为arr.length没append一次就-1了
                for(var i = 0; i < arr.length;) {
                    selectRightObj.appendChild(arr[i]);
                }
                            //实际for等于于 while(arr.length>0) selectRightObj.appendChild(arr[0]);
            }
    
    
                var arr = selectLeftObj.options;
                //遍历数组
                /*for(var i = 0; i < arr.length; i++) {
                    if(arr[i].selected) {
                        selectRightObj.appendChild(arr[i]);//这里append后arr.length会-1.所以下面的i得-1,从原来的位置遍历,要不会遍历不全所有被选中的option
                        i--;
                    }
                }*/
                //此时打开页面会卡死   上面的不会
                for(var i = 0; i < arr.length; ) {
                    if(arr[i].selected) {
                        selectRightObj.appendChild(arr[i]);////这个你判断了selected属性,如果不是所有的option都选择了,那么就会存在i<arr.length的情况并且一直存在,所以死循环了
    
                    }
                }
    
    
    
    点赞 1 评论 复制链接分享
  • baluzju baluzju 2017-03-18 14:47

    死循环了,i永远等于0

     //此时打开页面会卡死   上面的不会
                for(var i = 0; i < arr.length; ) {
                    if(arr[i].selected) {
                        selectRightObj.appendChild(arr[i]);
    
                    }
                }
    
    点赞 1 评论 复制链接分享
  • lml_little 小虫信息科技 2017-03-18 15:17

    没给加上i++;应该跟第一个循环一样结构

    点赞 评论 复制链接分享

相关推荐