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>