爲什麼不能從html獲得<a>標記的價值

我不知道我的JavaScript或我的代碼有什麼問題。
我無法從HTML獲取<a>標記的data-value。
我不知道什麼是錯，因爲我只是JavaScript的初學者。爲什麼不能從html獲得<a>標記的價值

我有一個循環，我在我的網站有很多類別，我把我的<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); 
});

來源

2017-07-16 Jc John

不能有兩個ID同名。 ID應該是唯一的。 –

id必須是唯一的。您可以使用類作爲一個選擇你的問題

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

來源

2017-07-16 09:03:07 brk

標籤的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>

或者，如果你想捕獲點擊事件兩個錨標記，你可以使用類選擇，而不是

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

來源

2017-07-16 09:01:09

-1

ID始終是唯一的。你不能有相同的ID到不同的DOM元素。在這種情況下，給他們分配一個班級。

改變了ID類，並據此作出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>

來源

2017-07-16 09:03:18

您不能擁有兩個'class'屬性 – freefaller

。我將該課程列入清單組項目 –

@freefaller - 已更新它。然而，2班不是問題，並不意味着倒票？！ –

你需要改變兩兩件事：

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一邊，不重複自己，更好的方法是添加<a>元素在html側和js中的div中動態地將click()函數應用於每個<a>孩子的div。

下面是一個例子：

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); 
    }); 
}

來源

2017-07-16 09:13:26 davidxxx

爲什麼不能從html獲得<a>標記的價值

回答

相關問題