以编程方式访问Raphael路径

Question

我正在绘制raphael路径并使用“eye.node.id”为其分配ID。我试图让id有问题地改变颜色使用：

   `var selectedBodyPart = p.getById(1001); 
      selectedBodyPart.attr('fill', 'blue');` 

但它不起作用。我的小提琴是： http://jsfiddle.net/RaoBurugula/okgdtzzh/3/ 注：我已经添加了jQuery的参考，但仍康寿给我一个错误 “未捕获的ReferenceError：$没有定义”

HTML

 <div id="bodyMapContainer"> 
     </div> 

JS

 //RAPAEL PAGE 
     width = 700; 
     height = 900; 
     var bodyMapContainer = document.getElementById("bodyMapContainer"); 
     var p = Raphael(20,0,width,height); 
     //var p = Raphael(bodyMapContainer,"100%","100%"); 
     p.rect(0,0,width,height); 
     p.setViewBox(0,0,width,height,true); 
     drawEyes(150,45, 11, "Left Eye"); 
     drawEyes(129,46, 11, "Right Eye"); 

     //ID for the eyes 
     var eyeId = 1000; 
     selectEye(); 

     function drawEyes(xCoordinate,yCoordinate, radius, bodyPartName){ 
      var eye = p.circle(xCoordinate,yCoordinate, radius); 
      eyeId ++; 
      eye.node.id= eyeId; 
      eye.title=bodyPartName; 
      eye.attr ("stroke", "#F3F3FE"); 
      eye.hover(hoverIn, hoverOut); 
      eye.click(bodyPartClicked); 
      eye.attr('fill', 'red'); 
     } 

     // Hover in function 
     function hoverIn() { 

      this.attr('fill', 'green'); 
      console.log($(this).attr('id')); 
     } 

     // Hover out function 
     function hoverOut() { 

      this.attr('fill', 'red'); 
     } 

     function bodyPartClicked(){ 
      var selectedBodyPart = $(this).attr('title'); 
      console.log($(this).attr('title')); 
      console.log($(this).attr('id')); 
     } 

     function selectEye(){ 
      var selectedBodyPart = p.getById(1001); 
      selectedBodyPart.attr('fill', 'blue'); 
     } 

Answer 1

这里有两个问题，一个是小提琴，另外两个是代码。

小提琴问题，只是没有一个可加载的jquery，所以我已经加入到ls的jsfiddle本身。

的代码，问题是你定义

var eyeId = 1000; 

你打电话drawEyes（后），它使用它们。

而且为ID，使用

eye.id= eyeId; 

，而不是使用节点

左右交换他们，并且它应该工作。

如jsfiddle