为什么不能从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>标记的价值

回答

相关问题