Question

我尝试创建一个创建动态菜单的功能。我已经能够创建＆＃34; a＆＃34;标签，并为他们提供单独的链接，同时也为他们分配ID＆＃39; s。问题是我无法获取我的CSS应用其规则的列表中的链接。

function write_navBar() {
var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"]
var ul = document.createElement("ul");
document.getElementById("mainNav").appendChild(ul);
for (i = 0 ; i < links.length ; i++) {
    var ul = document.createElement("ul");
    var a = document.createElement("a");
    var text = document.createTextNode(links[i]);

    a.href = links[i];
    a.id = "mainNav";
    a.text = links[i];

    document.getElementById("mainNav").appendChild(a);
                                    }
}

任何关于清洁代码同时保持javascript的建议将不胜感激。并且还将理解对语法的任何解释。

谢谢！

Answer 1

您必须确保将正确的项目附加到正确的父项。扫描您的代码我假设您需要以下HTML输出：

<div id="mainNav"> // this is already there
    <ul>
        <li>
            <a href="intro.html">intro.html</a>
        </li>
        ... // repeat for other items in the array
    </ul>
</div>

您可以像这样修改代码以获得上述结果：

function write_navBar() {
    var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"]
    var ul = document.createElement("ul");
    document.getElementById("mainNav").appendChild(ul);
    for (i = 0 ; i < links.length ; i++) {
        var li = document.createElement("li");
        var a = document.createElement("a");

        a.href = links[i];
        a.className = "some-class-to-target-in-your-css";
        a.innerText = links[i];

        ul.appendChild(li);
        li.appendChild(a);
    }
}

Answer 2

你的方法并不坏。我曾经对这些做过类似的看法。但是，我现在相信它更可测试，更可靠，更容易将它们构建为实际模板，克隆它们，并通过工厂模式填充它们。

在您的设置中，您有一个父ul，然后在其中构建多个ul，其中包含a - 我将假设您想要嵌套{ {1}}元素 - 这就是它的作用。

以下是我将在您的方案中采用的方法。

步骤1：构建模板，并创建样式和视觉效果。

li

.navLink a{
  padding:3px;
}

简单的风格，我知道。但这只是为了简单起见，你可以真正做任何你想做的事情来塑造这个例子。请注意，它是一个简单的结构，因此您真正看到的是模板，<ul class="menuTemplate"> <li class="navLink"><a></a></li> </ul>元素和li元素。

我们在用例中添加到样式定义中的内容是

因为我们实际上并不想看模板，所以我们只想使用它。接下来，我们将为这些创建一个工厂。

.menuTemplate{
  display:none;
}

最后一步是简单地使用你的元素来保存导航元素 - 你在上面命名为“mainNav” - 然后从工厂填充它。

var navFactory = new function(){
    var template = document.querySelector('.menuTemplate .navLink');

    this.Create = function(text,href){
        var nav = template.cloneNode(true);
        var link = nav.querySelector('a');
        link.href = href;
        link.innerText = text;
        return nav;
    }
};

var navFactory = new function(){
  var template = document.querySelector('.menuTemplate .navLink');

  this.Create = function(text,href){
    var nav = template.cloneNode(true);
    var link = nav.querySelector('a');
    link.href = href;
    link.innerText = text;
    return nav;
  }
};

function write_navBar() {
 var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"];
 var navUl = document.querySelector('#mainNav ul');
 for(var i = 0; i < links.length; i++){
  navUl.appendChild(navFactory.Create(links[i],links[i])); 
 }
}

write_navBar();

.menuTemplate{
  display:none;
}

.navLink a{
  padding:3px;
  opacity:0.85
}

.navLink a:hover{
  opacity:1;
}

Answer 3

function write_navBar() {
  var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"];
  var ul = document.createElement("ul");
  var li, a, text;
  for (var i = 0, l = links.length; i < l; ++i) {
    li = document.createElement('li');
    a  = document.createElement('a');
    text = document.createTextNode(links[i]);

    a.href = links[i];
    a.setAttribute("class", "some-class-name");
    a.appendChild(text);
    li.appendChild(a);
    ul.appendChild(li);

  }
  document.querySelector("#mainNav").appendChild(ul);
}

•在getElementById上使用querySelector。两者都有效，但是对querySelector的性能提升。 API接近jQuery，大多数（如果不是全部）新浏览器都支持querySelector。

•出于性能原因，在您再次添加元素之后附加ul。

•使用LI来保持链接元素，第二个UL不会做你想要的。

•不要重新使用id，你想要使用的东西是一个类，它们基本上做同样的事情，但是javascript以不同的方式处理id和类。如果这不符合您的需求，请在您的css中尝试复合CSS选择器，例如： #mainNav ul li a { /* styles here */ }

使用Javascript将动态链接嵌套到动态列表中

3 个答案: