Question

有谁能说为什么以下递归函数对我不起作用？它应该递归地收集给定元素中的所有单选按钮。但是，它没有找到任何原因！？

谢谢！

<?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>

Answer 1

对于易于使用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可以简化它。

Answer 2

试试这个

<?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的范围。

变量i未声明为方法的本地变量，它在全局范围内可用。所以只需使用var keyword将变量声明为local。

尝试将firefug用于任何其他调试工具，以检查javascript执行以解决此类问题。

尝试输入一些日志消息以找出实际的执行路径并对其进行分析以找出代码执行的问题

希望这能解决您的问题

JavaScript递归无法正常工作

2 个答案: