Javascript - 多个类。如何区分哪一个被点击了？

Question

这是我的简单脚本，它将范围中的数字放入文本区域:

function get_post ()
{
document.getElementById("text").innerHTML = ">>"+document.getElementById("link").innerHTML;
}

<textarea id="text"></textarea>
<br /><br />No. <a href="#" onClick="get_post();"><span id="link">1948491</span></a>
<br /><br />No. <a href="#" onClick="get_post();"><span id="link">42342342</span></a>

但它仅适用于第一个元素。我怎样才能让它在多个元素上工作？具有通用 id/class 的解决方案好吗？或者也许我应该为每个 a 或 span 元素添加自定义 id/class？

最后一个问题 - 如何更改文本区域内容而不清除它？ innerHTML 正在删除我已经输入的所有内容。

问候，

马特

Answer 1

它只获取第一个元素的原因是 id 值是唯一的，因此您只能获取 DOM 中元素的第一个实例。

使用 JQuery，您可以使用 this 关键字来获取 span 元素，如下所示:

$("a.link").click(function (e) {
    e.preventDefault();
    get_post(this);
});      

function get_post (t)
{
    var link = $(t);
    var textarea = $("#text");
    var span = link.find("span");

    textarea.val(">>" + span.html());
}

确保向链接添加一个类以正确识别它们:

<a href="#" class="link">

Here is a working example