Question

我正在绘制raphael路径并使用“eye.node.id”为它们分配id。我试图通过以下方式使用id来改变颜色：

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

但它不起作用。我的小提琴是： http://jsfiddle.net/RaoBurugula/okgdtzzh/3/ 注意：我已经添加了jquery引用但仍然consol给了我一个错误“Uncaught ReferenceError：$ is not defined”

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

以编程方式访问Raphael路径

1 个答案: