为什么不能<a>从html</a>获取<a>标记</a>的值

Question

我不知道我的JavaScript或代码有什么问题。
我无法从HTML获取<a>标记的data-value 。
我不知道怎么了，因为我只是JavaScript的初学者。

我有一个循环，其中我的网站中有很多类别，并且我在<a>标记中添加了id值。
这是代码：

<div class="list-group">
  <?php foreach($data as $single_data) { ?>
  <a href="#" id="target" data-value="<?php echo $single_data->Category_id; ?>" class="list-group-item"><?= $single_data->Category_name ?></a>
  <?php } ?>
</div>

当我去显示页面源代码时，它看起来不错，看起来像这样：

<a href="#" id="target" data-value="1" class="list-group-item">Gadgets</a>
<a href="#" id="target" data-value="2" class="list-group-item">Books</a>

现在这是我的JavaScript：

$("#target").click(function() {
    var value = $(this).data("value");
    alert(value);
});

Answer 1

标签的ID应该是唯一的
你可以做类似的事情

<a href="#" id="target1" data-value="1" class="list-group-item">Gadgets</a>
<a href="#" id="target2" data-value="2" class="list-group-item">Books</a>

或者，如果您想捕获两个定位标记的click事件，则可以改用类选择器

 $(".list-group-item").click(function() { var value = $(this).data("value"); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" id="target" data-value="1" class="list-group-item">Gadgets</a> <a href="#" id="target" data-value="2" class="list-group-item">Books</a> 

Answer 2

id必须是唯一的。 您可以在问题中使用class作为选择器

 $(".list-group-item").click(function() { var value = $(this).data("value"); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" data-value="1" class="list-group-item">Gadgets</a> <a href="#" data-value="2" class="list-group-item">Books</a> 

Answer 3

您需要更改两件事：

• 元素的ID必须是唯一的
• 用click（）函数绑定每个元素。

和html端：

<a href="#" id="targetGadget" data-value="1" class="list-group-item">Gadgets</a>
<a href="#" id="targetBook" data-value="2" class="list-group-item">Books</a>

JS端：

$("#targetGadget").click(function() {
    var value = $(this).data("value");
    alert(value);
});
$("#targetBook").click(function() {
    var value = $(this).data("value");
    alert(value);
});

---

现在，从JS方面开始，为了不重复自己，一种更好的方法是在html端的div中添加<a>元素，并在js中为div的每个<a>子元素中的每个动态应用click()函数。

这是一个例子：

html：

div id="targets">
  <a href="#" id="targetGadget" data-value="1" class="list-group-item">Gadgets</a>
  <a href="#" id="targetBook" data-value="2" class="list-group-item">Books</a>
</div>

js：

var children = $("#targets").get(0).children;
for (var i = 0; i < children.length; i++) {
    var child = children[i];
    $(child).click(function() {
        var value = $(this).data("value");
        alert(value);
    });
}

Answer 4

ID始终是唯一的。 不同的DOM元素不能具有相同的ID。 在这种情况下，请为他们分配一个班级。

将ID更改为class，并相应地更改了JS代码：

 $(".target").click(function() { var value = $(this).data("value"); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="target list-group-item" data-value="1">Gadgets</a> <a href="#" class="target list-group-item" data-value="2">Books</a>