자바 스크립트에서 여러 링크를 만드시겠습니까?

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

이것은 다소 과잉 일지 모르지만 backbone.js와 같은 모델과 템플릿을 지원하는 클라이언트 측 프레임 워크를 살펴볼 수 있습니다. 그런 다음 모든 링크를 쉽게 변경할 수있는 모델에 저장할 수 있으며 이벤트를 통해보기를 자동으로 업데이트합니다. 또한 underscore.js 템플릿을 사용하여 html을 문자열로 쓸 필요가 없습니다. 정확한.

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은 연결 연산보다 빠릅니다.

links = new Array(); 

이 links = [];으로 더 잘 쓸 수

:

Answer 3

는 "쉽게"할 수있는 방법의 다양한 측면이 있습니다. (거의) Javascript에서 만나게 될 모든 것이 이미 객체이기 때문에 이에 대한 자세한 설명이 명확하지 않습니다. 한 번에 모든 것을하고있는 경우를 사용하여,

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

나 : 당신이 각 인덱스, 예를 지정할 필요가 없습니다 있도록

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

더 나은 작성 .push()를 사용 할 수 있습니다 배열 리터럴, 예를 들면 :

이

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

이하-좋은, 내 생각에,뿐만 아니라, 옵션, .concat()를 사용하여, 모두의 혼합물 일 수 있습니다

,451,515,

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() 해킹을 사용하는 대신 문서가 작동 할 준비가되었는지 실제로 확인할 수 있습니다. 예 :

이 모두는 기분에 따라 "더 쉽다"고 간주 될 수 있습니다.