以編程方式訪問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