关于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个回答

         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的情况并且一直存在,所以死循环了

                }
            }


qq_32679815
子弹与信仰 懂了,多谢。
3 年多之前 回复

死循环了,i永远等于0

 //此时打开页面会卡死   上面的不会
            for(var i = 0; i < arr.length; ) {
                if(arr[i].selected) {
                    selectRightObj.appendChild(arr[i]);

                }
            }
qq_32679815
子弹与信仰 这个循环和第三个方法中的循环有什么不同?为什么第三个能运行。 不是说js是弱类型语言,这里面的数组的长度是可以改变的吗? 在if判断后 新数组不是还是从第一个开始的吗?。。有点不太明白 ,第二个和第三个的区别。。。。。加了一个判断就死循环了。。
3 年多之前 回复

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

qq_32679815
子弹与信仰 那为什么第三个可以,第三中我的意思是 每次都执行 index=0 的 随着数组变化不会产生漏的情况 。。。。
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐