Question

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

.attr方法我得到一个id的未定义警报，没有对click事件的响应。

.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){
   ...
});

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

1 个答案: