Question

我有一个学校作业，我们必须使用javascript对网页进行随机编辑，编辑不允许使用jquery或css。我想要反转导航栏的顺序，例如更改

关于联系的主页

到

联系家庭

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

bytes = ms.ToArray();

vars只是数组，我存储了我想要更改的内容以及我想要使用的href以及我希望它们显示的文本。

如果你能提供帮助，请提前感谢!!

html只是一个来自免费模板而且不是我的栏，在链接中添加了一个id，

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

Answer 1

您可以在一个单独的for循环中处理..

也许你应该看看For-In循环 - ＆gt; 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的{{1}}函数，它只是在调用renderReverseNav之前反转数据。

您可以查看下面的工作示例。如果您有任何疑问，请告诉我。

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

＆＃13;

renderNav

＆＃13;

// 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);

＆＃13;

javascript，嵌套for循环问题

2 个答案: