jquery - 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 “，做某事)；

2) 但是，当您可以使用 Raphael 时，为什么还需要使用 jQuery 来处理事件处理程序呢？

raphaelElement.mousedown(eventHandlerFunction); 

或

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

3)您也可以这样做:

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