attr() 方法
要获取 data-id 属性的内容，请使用 attr() 方法，该方法将返回一个字符串：
$(this).attr("data-id") //returns the string "457"
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div p {
display: inline-block;
margin: 10px;
list-style: none;
opacity: 0.8;
}
div p:hover {
opacity: 1;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<div class="divClass">
<p data-id="id1">
<a href="#"> Link1</a>
</p>
<p data-id="id2">
<a href="#"> Link2</a>
</p>
<p data-id="id3">
<a href="#"> Link3</a>
</p>
</div>
<script>
$(document).ready(function() {
$(".divClass p").on("click", function() {
let dataId = $(this).attr("data-id");
alert("The data-id of clicked item is: " + dataId);
});
});
</script>
</body>
</html>
jQuery 提供了多种操作 HTML 元素的方法。
在本教程中，我们将学习两种简单快速的获取 data-id 的方法。
假设我们有以下链接：
<a data-id="457">link</a>
attr() 和 data() 方法
.data() 方法允许以安全的方式将任何类型的数据添加到 DOM 元素，以避免循环引用和内存泄漏。
用于更新数据的 data() 方法不会影响 DOM 中的属性。
要设置 data-* 属性值，可以使用 attr 方法。
它将仅获取匹配集中第一个元素的属性值。
使用 jQuery 1.6，.attr() 方法将为尚未设置的属性返回 undefined。
data() 方法
如果 jQuery >= 1.4.3 版本，我们可以使用 data() 方法：
$(this).data("id") //returns the number 567
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
div p {
display: inline-block;
margin: 10px;
list-style: none;
opacity: 0.8;
}
div p:hover {
opacity: 1;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<div class="divClass">
<p data-id="id1">
<a href="#"> Link1</a>
</p>
<p data-id="id2">
<a href="#"> Link2</a>
</p>
<p data-id="id3">
<a href="#"> Link3</a>
</p>
</div>
<script>
$(document).ready(function() {
$(".divClass p").on("click", function() {
let dataId = $(this).data("id");
alert("The data-id of clicked item is: " + dataId);
});
});
</script>
</body>
</html>
确保你的属性只包含小写字母，例如 data-idNum 不起作用，但 data-idnum 会。
日期：2020-06-02 22:16:20 来源：oir作者：oir