1

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

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

4

3 回答 3

2

您的方法的各个方面可以变得“更容易”：

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()黑客。例如：

<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-01T19:25:04.587 回答
1 
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 operation 快。

于 2012-10-01T18:08:32.343 回答
0

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

于 2012-10-01T18:07:47.757 回答