javascript - Raphael JS on rect click redirect to url 采用所有矩形的最后一个 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 演示

上面的代码是我正在处理的版本，它在 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);
      };
   }