Question

我需要找到一种方法来使用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

有更简单的方法吗？

Answer 1

您的方法有多个方面可以“更容易”：

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

您可以使用公共库（例如jQuery或Prototype）删除部分原始HTML并简化某些循环等。这也可以让您实际检查文档是否已准备好对其进行操作，而不是使用那个脆弱的setTimeout() hack。例如：

<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>

根据您的心情，所有这些都可能被视为“更容易”。

Answer 2

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操作更快。

Answer 3

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

Javascript创建多个链接？

3 个答案: