2015-05-14 185 views
1

我正在繪製raphael路徑並使用「eye.node.id」爲其分配ID。我試圖讓id有問題地改變顏色使用:以編程方式訪問Raphael路徑

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

回答

0

這裏有兩個問題,一個是小提琴,另外兩個是代碼。

小提琴問題,只是沒有一個可加載的jquery,所以我已經加入到ls的jsfiddle本身。

的代碼,問題是你定義

var eyeId = 1000; 

你打電話drawEyes(後),它使用它們。

而且爲ID,使用

eye.id= eyeId; 

,而不是使用節點

左右交換他們,並且它應該工作。

jsfiddle

+0

感謝你,非常有幫助。 – BRDroid