Javascript - 多类.如何区分单击了哪一个

Javascript - multiple class. How can i distinguish which one was clicked?

本文关键字：单击 哪一个 何区 多类 Javascript      更新时间：2023-09-26

这是我的简单脚本，它应该将span中的数字放入文本区域：

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/类的解决方案好吗？或者也许我应该为每个 a 或 span 元素添加自定义 id/类？

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

问候

马 特

它只获取第一个元素的原因是因为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 中必须是唯一的，如果不是，则只得到第一个实例，使用 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>

我同意@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.
});
相关文章：