簡體   English   中英

JavaScript遞歸無法正常工作

[英]JavaScript recursion does not work properly

誰能說為什么以下遞歸函數對我不起作用? 它應該遞歸地收集給定元素中的所有單選按鈕。 但是,由於某種原因未找到任何內容!

謝謝 !!

<?xml version="1.0" encoding="Windows-1255"?>
<!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>
    <script type="text/javascript"> 
        function AllInputs(radioElement) {
            this.radioInputs = ((arguments.length == 1) ? [radioElement] : []);
        }

        AllInputs.prototype.toString = function() {
            return "[object AllInputs: radioInputs: " + this.radioInputs.length + "]";
        }

        AllInputs.prototype.add = function(otherAllInputs) {
            this.radioInputs = this.radioInputs.concat(otherAllInputs.radioInputs);
        }

        function getAllInputsOfElement(element) {
            if (element.tagName.toLowerCase() == "input") {
                if (element.getAttribute("type").toLowerCase() == "radio") {
                    return new AllInputs(element);
                } else {
                    return new AllInputs();
                }
            } else {
                var result = new AllInputs();

                for (i = 0; i < element.children.length; i++) {
                    result.add(getAllInputsOfElement(element.children[i]));
                }

                return result;
            }
        }

        function main() {
            alert(getAllInputsOfElement(document.getElementById("MyTable")));
        }
    </script>
</head>

<body onload="main()">
    <table id="MyTable">
        <tr><td>Day</td></tr>

        <tr><td>
            <input type="radio" name="DayOfTheWeek" value="1" /><label>Monday</label>
            <input type="radio" name="DayOfTheWeek" value="2" /><label>Tuesday</label>
            <input type="radio" name="DayOfTheWeek" value="3" /><label>Wednesday</label>
        </td></tr>
    </table>
</body>
</html>

您已經為使用DOM方法輕松解決的問題提供了非常復雜的解決方案。 嘗試以下方法:

<?xml version="1.0" encoding="Windows-1255"?>
<!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>
    <script type="text/javascript"> 
        function main() {
            var inputs = document.getElementById("MyTable").getElementsByTagName("input");
            var radios = [];

            for(var i=0; i<inputs.length; i++) {
                if (inputs[i].type == "radio") {
                    radios.push(inputs[i]);
                }
            }
            alert("Found " + radios.length + " radio buttons");
        }
    </script>
</head>

<body onload="main()">
    <table id="MyTable">
        <tr><td>Day</td></tr>

        <tr><td>
            <input type="radio" name="DayOfTheWeek" value="1" /><label>Monday</label>
            <input type="radio" name="DayOfTheWeek" value="2" /><label>Tuesday</label>
            <input type="radio" name="DayOfTheWeek" value="3" /><label>Wednesday</label>
            <input type="button" value="Nope" />
        </td></tr>
    </table>
</body>
</html>

使用jQuery可以更加簡化。

嘗試這個

<?xml version="1.0" encoding="Windows-1255"?>
<!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>
    <script type="text/javascript"> 
        function AllInputs(radioElement) {
            this.radioInputs = ((arguments.length == 1) ? [radioElement] : []);
        }

        AllInputs.prototype.toString = function() {
            return "[object AllInputs: radioInputs: " + this.radioInputs.length + "]";
        }

        AllInputs.prototype.add = function(otherAllInputs) {
            this.radioInputs = this.radioInputs.concat(otherAllInputs.radioInputs);
        }

        function getAllInputsOfElement(element) {
            if (element.tagName.toLowerCase() == "input") {
                if (element.getAttribute("type").toLowerCase() == "radio") {
                    return new AllInputs(element);
                } else {
                    return new AllInputs();
                }
            } else {
                var result = new AllInputs();
                var noOfChildren = element.children.length;
                for (var i = 0; i < noOfChildren; i++) {
                    result.add(getAllInputsOfElement(element.children[i]));
                }

                return result;
            }
        }

        function main() {
            alert(getAllInputsOfElement(document.getElementById("MyTable")));
        }
    </script>
</head>

<body onload="main()">
    <table id="MyTable">
        <tr><td>Day</td></tr>

        <tr><td>
            <input type="radio" name="DayOfTheWeek" value="1" /><label>Monday</label>
            <input type="radio" name="DayOfTheWeek" value="2" /><label>Tuesday</label>
            <input type="radio" name="DayOfTheWeek" value="3" /><label>Wednesday</label>
        </td></tr>
    </table>
</body>
</html>

我沒有檢查您要解決的問題。 我剛剛檢查了您遇到的問題。

這是因為getAllInputsOfElement()中迭代變量i的范圍。

我沒有將變量聲明為方法的局部變量,它在全局范圍內可用。 因此,只需使用var關鍵字將變量聲明為local即可。

嘗試對其他調試工具使用firefug來檢查javascript執行以解決此類問題。

嘗試放置一些日志記錄消息以找出實際的執行路徑並對其進行分析以查找代碼執行中的問題

希望這能解決您的問題

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM