javascript - 如何访问 Raphael 中任何元素的 id 属性

Question

我正在使用 Raphael 在网站上绘制一些元素。元素包括矩形、线（路径）。我已经为路径元素提供了一个 ID，并尝试在该行的 onclick 事件中访问它。但是当我对 id 进行警报时，什么都看不到。以下是代码片段

function createLine() 
{ 
  var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
  t.attr('stroke-width','3');
  t.attr('id','Hello');
  t.node.onclick = processPathOnClick; 
}

function processPathOnClick() 
{
    alert($(this).attr("id"));
}

谁能告诉我上面的代码有什么问题。任何指针都会有所帮助。

谢谢

Answer 1

你确定你不想写$(t.node).attr('id','Hello');吗？

更新：有人刚刚对这个答案投了反对票。而且我真的有义务指出这种设置 id 的方式并不是特别好。你最好使用：

t.node.id = 'Hello';

我希望有一种方法可以赞扬胡安门德斯，而不是支持他对这个答案的评论。

Answer 2

试试这个：

function createLine()  { 
    var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
    t.attr('stroke-width','3');
    t.id = 'Hello';
    t.node.onclick = processPathOnClick;
}

function processPathOnClick() {
    alert($(this).id);
    alert(this.id); // This should work too...
}

基本上，您正在 Raphael 行实例变量“t”上创建一个名为“id”的新属性。在我看来，这是一种黑客行为，但它确实可以解决问题。

Answer 3

尝试使用 jquery 设置处理程序

function createLine() 
{ 
  var t = paper.path("M" + xLink + " " + yLink +"L" + linkWidth + " " + linkHeight);
  t.attr('stroke-width','3');
  t.attr('id','Hello');
  $(t.node).click(processPathOnClick);
}

function processPathOnClick() 
{
    alert($(this).attr("id"));
}