Javascript-多类。我如何区分单击的是哪一个？

下面是我的简单脚本，它应该将数字从span放入textarea：

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>

函数get\u post（）
{
document.getElementById（“text”）.innerHTML=“>>”+document.getElementById（“link”）.innerHTML；
}


没有。


没有。

但它只适用于第一个alement。如何使其在多个元素上工作？具有公共id/类的解决方案是否良好？或者我应该为每个a或span元素添加自定义id/类

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

问候,

---

Matt

它只获取第一个元素的原因是

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">

---

它只获取第一个元素的原因是
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">

id在DOM中必须是唯一的，如果不是唯一的，则只获取第一个实例，使用类来标识多个元素

<textarea id="text"></textarea>
<br /><br />No. <a href="#" class="link"><span>1948491</span></a>
<br /><br />No. <a href="#" class="link"><span>42342342</span></a>
<script>
$('a.link').click(function() {
$("#text").val($("#text").val() + ">>" + $(this).find('span').html());
return false;
});
</script>




没有。


没有。
$（'a.link'）。单击（函数（）{
$（“#text”）.val（$（“#text”）.val（）+“>>”+$（this.find（'span'）.html（））；
返回false；
});
id在DOM中必须是唯一的，如果不是唯一的，则只获取第一个实例，使用类来标识多个元素

<textarea id="text"></textarea>
<br /><br />No. <a href="#" class="link"><span>1948491</span></a>
<br /><br />No. <a href="#" class="link"><span>42342342</span></a>
<script>
$('a.link').click(function() {
$("#text").val($("#text").val() + ">>" + $(this).find('span').html());
return false;
});
</script>




没有。


没有。
$（'a.link'）。单击（函数（）{
$（“#text”）.val（$（“#text”）.val（）+“>>”+$（this.find（'span'）.html（））；
返回false；
});
我同意@shadow，你应该使用
类而不是
ID的
。假设您正在使用
链接
作为
类
。在此之后，以下代码应该可以正常工作：

$('.link').on('click',function(e){
  e.preventDefault();  // as you are using anchor tag.
  var x= $('#text').val(),
  y = $(this).text();
  $('#text').val(x+y) // if you want previous text too.
  $('#text').val(y) // if you want new text only.
});

我同意@shadow，你应该使用
类
而不是
ID的
。假设您正在使用
链接
作为
类
。在此之后，以下代码应该可以正常工作：

$('.link').on('click',function(e){
  e.preventDefault();  // as you are using anchor tag.
  var x= $('#text').val(),
  y = $(this).text();
  $('#text').val(x+y) // if you want previous text too.
  $('#text').val(y) // if you want new text only.
});

ID应该是唯一的，use class INSTEADDS应该是唯一的，use class insteadI已经粘贴了与您完全相同的代码，它不起作用。一旦我点击一个数字，它什么也不做。我已经包含了jquerylib，并且没有任何错误。我完全不知道它为什么不起作用。@MateuszOsuch:摆脱内联事件处理程序，在脚本中使用javascript/JQuery添加单击事件检查：正如我所写的，我已将代码粘贴为1:1。@MateuszOsuch:您有一些奇怪的控制台错误，这可能是问题所在，JQuery似乎没有正确设置。请检查：请告诉我问题出在哪里。只有jquery库和您的脚本。它不起作用了…我粘贴了和你完全相同的代码，它不起作用了。一旦我点击一个数字，它什么也不做。我已经包含了jquerylib，并且没有任何错误。我完全不知道它为什么不起作用。@MateuszOsuch:摆脱内联事件处理程序，在脚本中使用javascript/JQuery添加单击事件检查：正如我所写的，我已将代码粘贴为1:1。@MateuszOsuch:您有一些奇怪的控制台错误，这可能是问题所在，JQuery似乎没有正确设置。请检查：请告诉我问题出在哪里。只有jquery库和您的脚本。它不起作用了。。。