如何使用 jQuery 获取元素的 data-id 属性
答案:使用jQuery attr() 方法
您可以简单地使用 jQuery attr() 方法来查找 HTML 元素的 data-id 属性。
以下示例将向您展示如何获取被点击项目的 data-id。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery 获取 data-id 属性</title>
<style>
ul li{
display: inline-block;
margin: 10px;
list-style: none;
opacity: 0.8;
}
ul li:hover{
opacity: 1;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".gallery li").on("click", function(){
var dataId = $(this).attr("data-id");
alert("The data-id of clicked item is: " + dataId);
});
});
</script>
</head>
<body>
<ul class="gallery">
<li data-id="1">
<a href="#">
<img src="images/club.jpg" alt="Club">
</a>
</li>
<li data-id="2">
<a href="#">
<img src="images/diamond.jpg" alt="Diamond">
</a>
</li>
<li data-id="3">
<a href="#">
<img src="images/spade.jpg" alt="Spade">
</a>
</li>
<li data-id="4">
<a href="#">
<img src="images/heart.jpg" alt="Heart">
</a>
</li>
</ul>
</body>
</html>或者，您也可以使用 jQuery data() 方法（jQuery 版本 >= 1.4.3），使用类似 $(element).data(key) 的语法来获取元素的数据属性。
这意味着在上面的示例中，要使用 data() 方法获取 data-id，您可以使用 $(this).data("id") 之类的语句。 关键是删除data-后的其余部分。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
