如何在mootools(1.1)中单击按钮时获取元素的id

Question

我有一堆带有非预先确定的 id 的链接，如下所示：

<a href="#" class="remove_pid" id="pid_123">Remove 123</a>
<a href="#" class="remove_pid" id="pid_234">Remove 234</a>
<a href="#" class="remove_pid" id="pid_567">Remove 567</a>
<a href="#" class="remove_pid" id="pid_890">Remove 890</a>

我有一个像这样的事件处理程序：

$$('.remove_pid').addEvents({
   'click': removePid
});

它调用此函数

function removePid(event)
{
    alert('yo what is my element id???');
}

所以问题是如何在函数removePid() 中获取元素 id？

更新：

@Aishwar，event.target.id 似乎在以下情况下工作，但不是专门针对我的情况

<a href="#" class="remove_pid"><img src="/123.jpg" id="pid_123"></a>

更新 2：

我认为这是无关紧要的，但不是文本“删除 123”我实际上有一个像这样的图像：

<a href="#" class="remove_pid" id="pid_123"><img src="/123.jpg"></a>

所以，感谢@Dimitra 指出它。我对投票感到惊讶，但很高兴地说我可能应得的。

Answer 1

我没有使用 mootools 的经验。但我猜你可以在 removePid 中按照这些思路做一些事情：

var element = event.srcElement || event.target
element.id // is the element's id, element is the DOM element itself

Answer 2

根据最终更新中发布的标记：

http://www.jsfiddle.net/dimitar/Sr8LC/

$('.remove_pid').addEvents({
    'click': function(e) {
        new Event(e).stop();
        var id = this.getProperty("id");
        alert(id);
        alert(id.replace("pid_", ""));
    }
});

使用命名函数并保留事件：

var removeProduct = function(e) {
    new Event(e).stop();
    var id = this.getProperty("id");
    alert(id);
    alert(id.replace("pid_", ""));
};

$('a.remove_pid').each(function(el) {
    el.addEvents({
        'click': removeProduct.bind(el)
    });
});

在两个函数中，this 将引用触发元素（锚点），因此您可以读取它的属性等。this .getFirst() 将引用图像（如果需要的话）。

Answer 3

我想我找到了：

function removePid(event)
{
    //alert('yo what is my element id???');
    $(event.target).getParent('a').getProperty('id');
}

这适用于 FF 3.6