javascript，嵌套for循环问题

Question

我有一个学校任务，我们必须只使用 javascript 对网页进行随机编辑，不允许使用 jquery 或 css 进行编辑。我正在寻找反转导航栏的顺序，例如更改

首页关于联系方式

到

联系方式

因为它们是链接，所以我也必须更改 href，但我在某处犯了一个愚蠢的错误，因为它将所有内容都更改为 home（将文本更改为“home”，将 href 更改为我想用于的 href "home") 所以我认为问题一定是我的第二个 for 循环或循环中的问题，我只是看不到在哪里，所以任何帮助将不胜感激！

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]; 
            }   
        }
   }

vars 只是我存储要更改的 id 和要使用的 href 以及我希望它们显示的文本的数组。

如果您能提供帮助，请提前感谢！

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 循环中处理它..

也许你应该看看 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。

最后，我创建了一个简单的函数来包装这个名为 renderReverseNav 的 renderNav 函数，它在调用 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>