本文旨在解决在使用 jQuery 处理点击事件时，如何根据点击的链接获取其对应的 `knowl` 属性值，并动态地将该属性值对应的内容展示在页面上。文章提供了两种实现方案，一种是每次点击都请求 JSON 数据，另一种是预先将 JSON 数据缓存到链接的 `data` 属性中，从而优化性能。
在使用 jQuery 处理点击事件时，经常需要获取触发事件的元素上的特定属性值，并根据该属性值执行相应的操作。例如，在一个链接列表中，每个链接都有一个唯一的 knowl 属性，点击链接后，需要根据 knowl 属性值从 JSON 文件中获取对应的内容，并将其显示在页面上。
方案一：每次点击都请求 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."
}代码解释：
- event.preventDefault();：阻止链接的默认跳转行为，避免页面跳转。
- var $a = $(this);：获取当前点击的链接的 jQuery 对象，this 指向触发事件的 DOM 元素。
- $.getJSON("knowls.json", function(json) { ... });：使用 jQuery 的 getJSON 方法异步加载 knowls.json 文件。
- var title = $a.attr("knowl");：使用 attr() 方法获取当前链接的 knowl 属性值。
- var knowl = json[title];：根据 knowl 属性值从 JSON 数据中获取对应的内容。
- $("div.knowlbody").html(knowl);：使用 html() 方法将获取到的内容设置到 div.knowlbody 元素中。
- $("div.knowlbody").toggle();：使用 toggle() 方法切换 div.knowlbody 元素的显示和隐藏状态。
注意事项：
- 每次点击链接都会发送 AJAX 请求，如果 JSON 文件较大或者链接数量较多，可能会影响性能。
- 需要确保 knowls.json 文件存在，并且格式正确。
方案二：预先将 JSON 数据缓存到链接的 data 属性中
为了优化性能，可以预先将 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."
}代码解释：
- $.getJSON("knowls.json", function(json) { ... });：使用 jQuery 的 getJSON 方法异步加载 knowls.json 文件。
- $('a').each(function() { ... });：遍历所有的链接元素。
- var $a = $(this);：获取当前遍历的链接的 jQuery 对象。
- var title = $a.attr("knowl");：获取当前链接的 knowl 属性值。
- var knowl = json[title];：根据 knowl 属性值从 JSON 数据中获取对应的内容。
- $a.data('knowlbody', knowl);：使用 data() 方法将获取到的 knowl 内容存储到链接的 data 属性中，键名为 knowlbody。
- $("a").click(function(event) { ... });：为所有链接绑定点击事件。
- var knowl = $(this).data('knowlbody');：在点击事件处理函数中，使用 data() 方法从当前点击的链接的 data 属性中获取 knowlbody 对应的值。
- $("div.knowlbody").html(knowl);：使用 html() 方法将获取到的内容设置到 div.knowlbody 元素中。
- $("div.knowlbody").toggle();：使用 toggle() 方法切换 div.knowlbody 元素的显示和隐藏状态。
注意事项：
- 这种方案只需要在页面加载时发送一次 AJAX 请求，可以显著提高性能。
- 需要确保 knowls.json 文件存在，并且格式正确。
- 如果 knowls.json 文件内容发生变化，需要刷新页面才能更新 data 属性中的数据。
总结
本文介绍了两种使用 jQuery 获取不同属性值的方法。第一种方法每次点击都请求 JSON 数据，简单直接，但性能较差。第二种方法预先将 JSON 数据缓存到链接的 data 属性中，性能更好，但需要在页面加载时加载所有数据。在实际应用中，可以根据具体情况选择合适的方案。如果 JSON 数据量不大，且变化不频繁，建议使用第二种方案。
