raphael.js jquery如何分配和访问id

Question

raphael.js 文档似乎警告不要使用 element.node，但它似乎是调用事件的唯一方法。我创建了一个 jsFiddle，它使用 3 种不同的方法为 3 种不同的形状分配 id：.attr、.data 和 .node.id。

.attr 方法我得到一个未定义的 id 警报并且没有响应点击事件。

.data 方法我得到了正确的警报 ID，但点击的警报未定义。

.node.id 我得到了正确的警报 id 和正确的点击警报。

谁能帮我找出最好使用的方法（如果 .node.id 可以的话）以及使用 jquery 定位这些形状的正确方法。

html: 正方形 长方形 圆圈

jquery/拉斐尔

var p = Raphael("test");

$(':radio[name="shapes"]').on('click', function () {
var shapeName = $(this).attr('id');

//test attr id
if (shapeName == "square") {
    var test1 = p.rect(10, 10, 40, 40);
    test1.attr('fill', 'black');
    test1.attr('id', 'help1');
    var data1;
    data1 = test1.attr('id');
    alert(data1);
    $(test1.node).click(confirmFunc3, removeOtherNodes);
}
//test node.id
else if (shapeName == "rectangle") {
    var test2 = p.rect(200, 20, 50, 80);
    test2.attr('fill', 'blue');
    test2.node.id='help2';
    var data2;
    data2 = test2.node.id;
    alert(data2);
    $(test2.node).click(confirmFunc);
}
//test data id
else if (shapeName == "circle") {
    var test3 = p.circle(100, 100, 40);
    test3.attr('fill', 'red');
    test3.data('id', 'help3');
    var data3;
    data3 = test3.data('id');
    alert(data3);
    $(test3.node).click(confirmFunc2);
}

function confirmFunc() {
    alert(this.id);
}
function confirmFunc2() {
    alert($(this).data('id'));
}
function confirmFunc3() {
    alert($(this).attr('id'));
}
function removeOtherNodes() {
    $('#help2').remove();
    $('#help3').remove();
}
});

http://jsfiddle.net/adam123/9wUJN/115/

Answer 1

1) 如果您以后需要通过 jQuery 访问元素，可以使用 element.node.id = "abc" - $('#abc').on("click", doSomething);

2) 但是既然可以使用 Raphael，为什么还要使用 jQuery 作为事件处理程序呢？

raphaelElement.mousedown(eventHandlerFunction); 

或

raphaelElement.mousedown(function(e){
   ...
}); 

3) 你也可以这样做：

raphaelElement.id = "abc";
var thatElement = paper.getById("abc");
thatElement.mousedown(function(e){
   ...
});