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

jQueryPrototypeなどの一般的なライブラリを使用することで、その生の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操作よりも高速です。

于 2012-10-01T18:08:32.343 に答える
0

これは少しやり過ぎかもしれませんが、backbone.jsなどのモデルとテンプレートをサポートするクライアント側のフレームワークを検討することをお勧めします。次に、すべてのリンクを簡単に変更できるモデルに保存できます(イベントを通じてビューが自動的に更新されます)。また、underscore.jsテンプレートを使用できるため、HTMLを文字列として記述する必要がありません。リテラル。

于 2012-10-01T18:07:47.757 に答える