JavaScript，嵌套for循環問題

Question

我有一個學校的任務，我們必須隨機編輯一個網頁，只使用JavaScript，不允許jQuery或CSS編輯。我期待扭轉導航欄的順序，例如更改

首頁聯繫關於家庭

到

接觸，因爲他們是鏈接我也必須改變href，但我在某個地方犯了一個愚蠢的錯誤，因爲它將所有事情都改變回家了（文本到「家」 href我想用於「家」），所以我認爲這個問題必須是我的第二個循環，否則在循環中，我只是無法看到在哪裏，所以任何幫助將不勝感激！

var navIds = ["hHome", "hAbout", "hPlants", "hGarden", "hNews", "hArticle", "hContact"]; 
var navHref = ["index.html", "about.html", "plants.html", "garden.html", "news.html", "article.html", "contact.html"]; 
var navText = ["home", "about", "plants", "garden", "news", "article", "contact"]; 

    function changeNav() 
    { 
     for(var i=0; i<navIds.length; i++) 
     { 
      for(var j=navHref.length; j>=0; j= j-1) 
      { 
       var x = document.getElementById(navIds[i]); 
       var y = navHref[j]; 
       x.setAttribute("href", y); 
       x.textContent = navText[j]; 
      } 
     } 
    } 

變量只是數組，其中我存儲了我想要更改的id以及我想要使用的hrefs以及我希望它們顯示的文本。

如果您可以幫助，請提前致謝！

的HTML距離一個免費的模板，是不是我的酒吧增加一個ID，鏈接，

<div id="header"> 
      <a href="index.html" id="logo"><img src="images/logo.png" alt="Logo"></a> 
       <ul> 
        <li> 
         <a id="hHome" href="index.html">Home</a> 
        </li> 
        <li> 
         <a id="hAbout" href="about.html">About</a> 
        </li> 
        <li> 
         <a id="hPlants" href="plants.html">Plants</a> 
        </li> 
        <li> 
         <a id="hGarden" href="gardens.html">Gardens</a> 
        </li>  
        <li class="current"> 
         <a id="hNews" href="news.html">News</a> 
        <ul> 
         <li class="current"> 
          <a id="hArticle" href="article.html">Article</a> 
         </li> 
        </ul> 
        </li> 
        <li> 
         <a id="hContact" href="contact.html">Contact</a> 
        </li> 
       </ul> 
     </div> 
     <div id="partA"> 
     <input type="submit" value="PartA" onclick="linkA()"/> 
     <input type="submit" value="PartB" onclick="linkB()"/> 
     </div> 

Answer 1

您可以處理在一個單一的環..

也許你應該有一看for-in循環 - >https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...in

繼承人什麼我想出了：

for(navs in navIds){ 
    var html = '<a id="' + navIds[navs] + '" href="' + navHref[navs] + '">' + navText[navs] + '</a>'; 

    document.body.insertAdjacentHTML('afterend',html); 
    } 

您可以在這裏試試：http://jsfiddle.net/1tLkz9o2/

Answer 2

如承諾的，這裏是我將如何處理這個問題。

首先，將多個數組壓縮爲包含nav對象的單個數組。

var navElementData = [ 
    { id: "hHome" , href: "index.html" , text: "home" }, 
    { id: "hAbout" , href: "about.html" , text: "about" }, 
    { id: "hPlants" , href: "plants.html" , text: "plants" }, 
    { id: "hGarden" , href: "garden.html" , text: "garden" }, 
    { id: "hNews" , href: "news.html" , text: "news" }, 
    { id: "hArticle", href: "article.html", text: "article" }, 
    { id: "hContact", href: "contact.html", text: "contact" } 
]; 

這樣，顯然數組中的每個對象都與單個菜單項相關，並使反轉過程更加簡單。

下面我提供了我將參考的完整工作實現。

我們現在需要一個實際上會執行單個元素渲染的函數。我已將它命名爲getNavElement。

要渲染這些元素的文檔，我創建了一個名爲renderNav一個新的通用函數，它在容器（例如div），以及一些數據navElementData。

最後，我創建了一個簡單的函數，該函數包含此renderNav函數名爲renderReverseNav，它簡單地在調用renderNav之前反轉數據。

您可以查看下面的工作示例。如果您有任何問題，請告訴我。

http://jsbin.com/molimawicu/1/edit?html,js,output

// Create a new nav element 
 
function getNavElement(id, href, text) { 
 
    var element = document.createElement('a'); 
 
    element.id = id; 
 
    element.href = href; 
 
    element.textContent = text; 
 
    element.setAttribute('style', 'margin: 5px'); 
 
    return element; 
 
} 
 

 
// Render the nav element 
 
function renderNav(container, navElementData) { 
 
    // Clear the existing container 
 
    container.innerHTML = ''; 
 

 
    // Map over the data given 
 
    navElementData.map(function(data) { 
 
     // Create a new element 
 
     var element = getNavElement(data.id, data.href, data.text); 
 
     // Append it to the container 
 
     container.appendChild(element); 
 
    }); 
 
} 
 

 
function renderReverseNav(container, navElementData) { 
 
    return renderNav(container, navElementData.reverse()); 
 
} 
 

 
// --- usage --- 
 

 
var navElementData = [ 
 
    { id: "hHome" , href: "index.html" , text: "home" }, 
 
    { id: "hAbout" , href: "about.html" , text: "about" }, 
 
    { id: "hPlants" , href: "plants.html" , text: "plants" }, 
 
    { id: "hGarden" , href: "garden.html" , text: "garden" }, 
 
    { id: "hNews" , href: "news.html" , text: "news" }, 
 
    { id: "hArticle", href: "article.html", text: "article" }, 
 
    { id: "hContact", href: "contact.html", text: "contact" } 
 
]; 
 

 
var navContainer = document.getElementById('navContainer'); 
 
var revNavContainer = document.getElementById('revNavContainer'); 
 

 
renderNav(navContainer, navElementData); 
 
renderReverseNav(revNavContainer, navElementData);

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div id="navContainer"></div> 
 
    <div id="revNavContainer"></div> 
 
</body> 
 
</html>