raphael.js jquery如何分配和訪問id

Question

raphael.js文檔似乎警告不要使用element.node，但它似乎是調用事件的唯一方法。我創建了一個jsFiddle，它使用3種不同的方法分配3種不同形狀的id：.attr，.data和.node.id。

.attr方法我得到一個未定義的警報id和click事件的響應。

.data方法我得到正確的警報標識，但未定義的點擊警報。

.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訪問元素 - $('#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){ 
    ... 
});