本文旨在解决在使用 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 数据量不大，且变化不频繁，建议使用第二种方案。