拉斐爾JS在矩形點擊重定向到URL需要全部矩形

Question

我試圖遍歷列表和創建矩形框，並在每個用戶的點擊應該被重定向到指定頁面最後瀏覽的網址，雖然奮力瞭解點擊處理器。請幫我改進下面的代碼，以便它重定向到相應的url而不是最後一個。 （我認爲它我缺乏在JS本身的知識。）

 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

上面的代碼是一種什麼版本我的工作和它呈現在SVG多個rects，我遇到的問題點擊該矩形時，它僅返回最後一個。

謝謝。

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