子弹与信仰 2017-03-18 13:54 采纳率: 100%
浏览 1350
已采纳

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

<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条回答 默认 最新

  • Go 旅城通票 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的情况并且一直存在，所以死循环了

                }
            }
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥20 sub地址DHCP问题
  • ¥15 delta降尺度计算的一些细节，有偿
  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯，灯的闪烁很不稳定，经过调试发现测的距离偏大