拉斐尔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); 
     }; 
    }