2010-04-13 89 views
-1

任何人都可以說爲什麼下面的遞歸函數不適合我嗎? 它應該遞歸地收集給定元素中的所有單選按鈕。 但是,它由於某種原因沒有找到!JavaScript遞歸不能正常工作

謝謝!

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

回答

1

試試這個

<?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執行以解決此類問題。

嘗試把一些日誌消息找出實際執行路徑,並對其進行分析,找到問題的代碼執行

希望這能解決你的問題

+0

謝謝!這真的很有幫助。我會看看「螢火蟲」。 – 2010-04-13 04:26:38

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進一步簡化。