JavaScript递归无法正常工作
[英]JavaScript recursion does not work properly
问题描述
Could anyone say why the following recursive function does not work for me ? 
谁能说为什么以下递归函数对我不起作用？ It should collect recursively all radio buttons in a given element. 它应该递归地收集给定元素中的所有单选按钮。 But, it does not found any for some reason !? 但是，由于某种原因未找到任何内容！
Thanks !! 谢谢 ！！
<?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>
2 个解决方案
解决方案1
1 2010-04-13 03:45:32
You've got a very complicated solution to a problem that is easily handled with DOM methods. 您已经为使用DOM方法轻松解决的问题提供了非常复杂的解决方案。 Try this instead: 尝试以下方法：
<?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>
It could be simplified even more with jQuery. 使用jQuery可以更加简化。
解决方案2
1 已采纳 2010-04-13 03:47:46
Try this 尝试这个
<?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>
I'm not checking what you are trying to solve. 我没有检查您要解决的问题。 I just checked the issue you are having. 我刚刚检查了您遇到的问题。
It is because of the scope of the iterating variable i in getAllInputsOfElement(). 这是因为getAllInputsOfElement（）中迭代变量i的范围。
The variable i not declared as local to the method, it is available in the global scope. 我没有将变量声明为方法的局部变量，它在全局范围内可用。 So just declare the variable as local using var keyword. 因此，只需使用var关键字将变量声明为local即可。
Try to use firefug for any other debugging tools to check the javascript execution to fix this kind of issues. 尝试对其他调试工具使用firefug来检查javascript执行以解决此类问题。
Try to put some logging messages to find out actual execution path and analyse it to find the issues with the code execution 尝试放置一些日志记录消息以找出实际的执行路径并对其进行分析以查找代码执行中的问题
Hope this solves your problem 希望这能解决您的问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.