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

Question

I don't know whats the problem of my JavaScript or my code.
I can't get the data-value of an <a> tag from HTML.
I don't know what's wrong because I am just a beginner in JavaScript.

I have a loop where I have many categories in my website and I put a value of id from my <a> tag.
Here is the code:

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

When i go to show page source it looks good and look like this:

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

Now here is my JavaScript:

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

Answer 1

Id of the tag should be unique
You can do something like

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

Or if you want to capture click event for both anchor tags you can use class selector instead

 $(".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 need to be unique. You can use class as a selector in your problem

 $(".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

you need to change two things :

• id of elements have to be unique
• bound each element with a click() function.

And html side :

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

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

---

Now, from JS side, to not repeat yourself, a better way would be to add <a> elements in a div in the html side and in the js dynamically applying the click() function for each of <a> child of the div.

Here is an example :

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

IDs are always unique. You CANNOT have same ID to different DOM elements. In that case, assign them a class.

Changed the ID to class, and accordingly made change in JS code:

 $(".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>