Question

这是我的简单脚本，它应该将数字从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>

但它仅适用于第一款啤酒。如何使其在多个元素上工作？常见id / class的解决方案好吗？或者我应该为每个a或span元素添加自定义id / class？

最后一个问题 - 如何在不清除的情况下更改textarea内容？ 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

Answer 2

id在DOM中必须是唯一的，如果没有，你只获得第一个实例，使用class来标识多个元素

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

Answer 3

我同意@shadow，您应该使用class代替ID's。假设您使用link作为class。之后，以下代码应该可以正常工作：

$('.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.
});

Javascript - 多个班级。我如何区分哪一个被点击？

3 个答案: