클릭하면 Raphael JS 클릭 URL로 리디렉션 url은 모든 사각형의 마지막 URL을 취합니다.

Question

목록을 반복하여 사각형 상자를 만들고 각 사용자의 클릭을 특정 페이지로 리디렉션해야합니다. 클릭 핸들러. 마지막 코드 대신 해당 URL로 리디렉션되도록 코드 아래에서 수정하도록 도와주세요. 코드 위

 var items = [{'url': 'http://google.com'}, {'url': 'http://stackoverflow.com'}]; 
     var bh = 120; 
     var bw = 120; 
     var br = 8; 
     var start_x = 100; 
     var start_y = 80; 
     r = Raphael("holder", 840, 780) 
     for (var i = 0; i < items.length; i++){ 
      group = r.set() 
      group.push(r.rect(start_x, start_y, bh, bw, br)); 
      start_x = start_x+200; 
      group[0].node.onclick = function(){ 
      alert(items[i].url); 
      }; 
     } 

jsFiddle Demo

내가 일하고 어떤 버전의 종류 (나는. JS 자체 지식의 나의 부족을 생각) 그리고, 내가로 실행하고 문제를 SVG에 여러의 구형을 렌더링 직사각형을 클릭하면 마지막 단이 반환됩니다.

감사합니다.

Answer 1

문제는 i이라는 변수가 하나 있고 루프가 끝난 후에 그 값이 items.length입니다. 각 노드에 대해 올바른 값을 기억해야합니다. 사용해보기 :

for (var i = 0; i < items.length; i++){ 
     ... 
     var rect = r.rect(start_x, start_y, bh, bw, br); 
     rect.node.setAttribute('data-index', i); 
     group.push(rect); 
     ... 
     rect.node.onclick = function(event) { 
     alert(items[event.target.getAttribute('data-index')].url); 
     }; 
    }