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創建多個鏈接？

回答

相關問題