Question

我需要在与文本相同的标签中捕获和显示属性值。

我用过这个，但只适用于第一个id =“hit”。我想这是因为每个人都有相同的名称id（hit）。

我想点击任意链接，显示在适当位置收集的数据。

也就是说，如果我点击第一个链接，显示为文本：934410 （如果有效）但是，如果我点击第二个或第三个链接，这将不再有效，因为应显示第二个链接：20201 第三个链接应显示：2hello

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

<a href="#link" data-href="934410" id="hit">Test 1</a><br>
<a href="#link" data-href="20201" id="hit">Test 2</a><br>
<a href="#link" data-href="2hello" id="hit">Test 3</a><br>

<script>
$("#hit").click(function() {
	capturetxt = $("#hit").attr('data-href');
	$("#hit").html(capturetxt);
});
</script>

我知道我可以使用onclick =“myfunction（'要显示的值'）来做到这一点;”在每个<a>

中

但我不想在标签中使用onclick <a>，这就是我觉得很难解决这个问题的原因。

Answer 1

将您的ID更改为类。 Ids应该是独一无二的。此外，您应该使用jQuery的data函数并传入href作为参数。

$('.hit')也会返回HTML集合。要获取特定文本，您需要使用$(this)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#link" data-href="934410" class="hit">Test 1</a><br>
<a href="#link" data-href="20201" class="hit">Test 2</a><br>
<a href="#link" data-href="2hello" class="hit">Test 3</a><br>

<script>
    $(".hit").on('click', function() {
        capturetxt = $(this).data('href');
        $(this).html(capturetxt);
    });
</script>

Answer 2

您的ID应该是唯一的。非唯一ID不是有效的HTML标记。

除此之外，您还可以选择data-href属性。

$("[data-href]").click(function() {
    capturetxt = $(this).attr('data-href');
    $(this).html(capturetxt);
});

您可以在此处看到它：https://jsfiddle.net/b12rx1ua/

希望有所帮助！

从具有相同名称的多个ID捕获数据

2 个答案: