Javascript创建多个链接？

我需要找到一种方法来使用JavaScript为我的左侧导航制作多个链接。我会让分隔符将链接分成不同的类别。这是我现在的代码。Javascript创建多个链接？

links = new Array(); 
links[1]="<span class='asep' style='border-top: 0px; margin-top: 0px;'>Welcome</span>"; 
links[2]="<a href='#'>Home</a>"; 
links[3]="<span class='asep'>Body Jewelry</span>"; 
links[4]="<a href='#'>Circular Barbells</a>"; 
links[5]="<a href='#'>Belly Button</a>"; 
links[6]="<a href='#'>Curved Barbells</a>"; 
links[7]="<span class='asep'>User Controls</span>"; 
links[8]="<a href='#' onclick='window.print(); return false'>Print This Page</a>"; 


function writeLinks() { 
document.getElementById('nav1').innerHTML = links[1] + links[2] + links[3] + links[4] + links[5] + links[6] + links[7] + links[8]; 
document.getElementById('featured').innerHTML = ' <b>Featured Product</b><br><a href="#"><img src="icon1.gif" border="0"><br>Product Title</a>';

}

setTimeout(writeLinks, 0); // Fires the function on page load without stopping other loads

是否有更简单的方法来做到这一点？

来源

2012-10-01 Jesse Toxik

这可能有点矫枉过正，但您可能想看看支持模型和模板（如backbone.js）的客户端框架。然后，您可以将所有链接存储在易于更改的模型中（并且会通过事件自动更新视图），并且还可以使用underscore.js模板，因此不必将任何html编写为字符串文字。

来源

2012-10-01 18:07:47

如果有一种方法可以在将数组链接到innerHTML时从数组中删除逗号，我可以使用我的代码，但是我的问题是我将超过100页，因此我需要一些动态：（ –

存储链接在一个模型中，你是如何使它们变为动态的：）你总是可以遍历数组并解析出逗号！ –

我想你可以告诉即时通讯新的JS，因为我的代码很烂大声笑我怎样才能删除逗号？ –

var arr = []; 
arr[0] = <span class='asep'>Body Jewelry</span>; 
arr[1] = <span class='asep'>Do Something</span>; 

function writeLinks(){ 
    document.getElementById("nav1").innerHTML = arr.join(""); 
}

Array.Join比concat操作更快。

来源

2012-10-01 18:08:32 kannanrbk

这并没有解决其他更大的问题与他的方法。通过暗示你的改变，你鼓励他留下一个有缺陷的设计。 –

我不介意使用数组，但是当我尝试将数组的内容打印到innerHTML时，所有内容都由逗号分隔。 –

@Tyler，我们不知道他的情况或设计是什么？ – kannanrbk

有你的方法的各个方面，可制造“容易”：

links = new Array();

可以更好地写为links = [];。（几乎）所有你会在Javascript中遇到的东西已经是一个对象，因此详细说明它并不能增加清晰度。

links[1]="first..." 
links[2]="second...";

可以得到更好的编写使用.push()，这样你就不需要指定每个索引，如：

links.push("first"); 
links.push("second");

或者，如果你同时做这一切，用阵列的文字，如：

links = [ 
    "first", 
    "second" 
];

不太好看，在我看来，也是一种选择，可能是两者的混合物，使用.concat()：

links = [ 
    "first", 
    "second" 
]; 

links = links.concat([ 
    "third", 
    "fourth" 
]);

这可能是有意义的一起使用裸对象的数组，太集团的事情：

sections = [ 
    { 
     heading: '<span class="asep">First section...</span>', 
     links: [ 
      '<a href="#">First</a>', 
      '<a href="#">Second</a>' 
     ] 
    }, 
    { 
     heading: '<span class="asep">Second section...</span>', 
     links: [ 
      '<a href="#">Third</a>', 
      '<a href="#">Fourth</a>' 
     ] 
    }, 
]; 

function writeLinks(){ 
    var html = ""; 
    for(var i = 0; i < sections.length; i++){ 
     var section = sections[i]; 
     html += section.heading + section.links.join(""); 
    } 
    document.getElementById('nav1').innerHTML = html; 
} 
setTimeout(writeLinks, 0);

还要注意使用.join("")到一个数组中的所有元素连接在一起的字符串。

接下来，你的代码中有很多重复。你只能指定其中有不同的部分，例如：

sections = [ 
    { 
     heading: "First section...", 
     links: [ 
      "First", 
      "Second" 
     ] 
    }, 
    /* ...snip... */ 
]; 

function writeLinks(){ 
    var html = ""; 
    for(var i = 0; i < sections.length; i++){ 
     var section = sections[i]; 
     html += '<span class="asep">' + section.heading + "</span>"; 
     for(var j = 0; j < section.links.length; j++){ 
      html += '<a href="#">' + section.links[j] + "</a>"; 
     } 
    } 
    document.getElementById('nav1').innerHTML = html; 
} 
setTimeout(writeLinks, 0);

你可以摆脱一些原始的HTML和简化一些环等，通过使用公共库，如jQuery或Prototype。这也可以让你真正检查文档是否准备好对其进行操作，而不是使用那种易碎的setTimeout()黑客。例如：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script type="text/javascript"> 
/* ...snip... */ 
$(function(){ 
    var nav = $("<div />").attr("id", "nav1"); 
    $.each(sections, function(i,section){ 
     nav.append($("<span />").addClass("asep").text(section.heading)); 
     $.each(section.links, function(i,link){ 
      nav.append($("<a />").attr("href", "#").text(link)); 
     } 
    } 

    $("#nav1").replaceWith(nav); 
}); 
</script>

根据你的心情，所有这些可能被认为是“更容易”。

来源

2012-10-01 19:25:04

Javascript创建多个链接？

回答

相关问题