本文旨在解决在使用 jQuery 处理点击事件时，如何根据点击的链接获取其对应的 `knowl` 属性值，并动态地将该属性值对应的内容展示在页面上。文章提供了两种实现方案，一种是每次点击都请求 JSON 数据，另一种是预先将 JSON 数据缓存到链接的 `data` 属性中，从而优化性能。
在使用 jQuery 处理点击事件时，经常需要获取触发事件的元素上的特定属性值，并根据该属性值执行相应的操作。例如，在一个链接列表中，每个链接都有一个唯一的 knowl 属性，点击链接后，需要根据 knowl 属性值从 JSON 文件中获取对应的内容，并将其显示在页面上。
这种方案比较直接，每次点击链接时，都会发送一个 AJAX 请求到 JSON 文件，获取数据。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 获取不同属性值示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>
This page is my attempt to recreate LMFDB's knowls.
</p>
<p class="knowlink">
Click on this <a knowl="example" href="#">example</a>.
Or this <a knowl="secondary" href="#">other one</a>.
</p>
<div class="knowlbody" style="display: none">
</div>
<script>
$("a").click(function(event) {
event.preventDefault(); // 阻止链接默认跳转行为
var $a = $(this); // 获取当前点击的链接对象
$.getJSON("knowls.json", function(json) {
var title = $a.attr("knowl"); // 获取当前链接的 knowl 属性值
var knowl = json[title]; // 从 JSON 数据中获取对应的内容
$("div.knowlbody").html(knowl); // 将内容添加到 div.knowlbody 中
$("div.knowlbody").toggle(); // 显示/隐藏 div.knowlbody
});
});
</script>
</body>
</html>knowls.json 文件示例：
{
"example" : "something to show that this works.",
"secondary" : "another example, basically."
}代码解释：
注意事项：
为了优化性能，可以预先将 JSON 数据加载到页面中，并将每个链接对应的 knowl 内容存储到链接的 data 属性中。这样，点击链接时就不需要再发送 AJAX 请求了。
代码示例：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 获取不同属性值示例 (优化版)</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>
This page is my attempt to recreate LMFDB's knowls.
</p>
<p class="knowlink">
Click on this <a knowl="example" href="#">example</a>.
Or this <a knowl="secondary" href="#">other one</a>.
</p>
<div class="knowlbody" style="display: none">
</div>
<script>
$.getJSON("knowls.json", function(json) {
$('a').each(function() {
var $a = $(this);
var title = $a.attr("knowl");
var knowl = json[title];
$a.data('knowlbody', knowl); // 将 knowl 内容存储到链接的 data 属性中
});
});
$("a").click(function(event) {
event.preventDefault(); // 阻止链接默认跳转行为
var knowl = $(this).data('knowlbody'); // 从 data 属性中获取 knowl 内容
$("div.knowlbody").html(knowl);
$("div.knowlbody").toggle();
});
</script>
</body>
</html>knowls.json 文件示例：
{
"example" : "something to show that this works.",
"secondary" : "another example, basically."
}代码解释：
注意事项：
本文介绍了两种使用 jQuery 获取不同属性值的方法。第一种方法每次点击都请求 JSON 数据，简单直接，但性能较差。第二种方法预先将 JSON 数据缓存到链接的 data 属性中，性能更好，但需要在页面加载时加载所有数据。在实际应用中，可以根据具体情况选择合适的方案。如果 JSON 数据量不大，且变化不频繁，建议使用第二种方案。
以上就是使用 jQuery 获取不同的属性值的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
882
收藏
