本文将介绍如何使用 jQuery 动态地根据数据源（如 JSON 或数组）创建一系列包含图像和链接的按钮或项目。我们将使用 slice 方法将数据分割成块，并利用 map 函数高效地生成 HTML 结构，最终将其添加到指定容器中。
解决方案
以下是一个完整的解决方案，它使用 slice 方法将原始数据分割成指定大小的块，然后使用 map 函数生成相应的 HTML 结构。
$(document).ready(function () { let testButtonEntries = [ { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'insertsomelinkhere' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title', button_alt_text: 'Employee Alt Text', button_image: 'emp_button_title', link: 'somelinktosomewhere.com/' }, { button_title: 'Employee Button Title Last', button_alt_text: 'Employee Alt Text Last', button_image: 'emp_button_title_last', link: 'insertsomelinkhere.org' } ]; const rows = []; const size = 15; // 将原始数组分割成指定大小的块 while (testButtonEntries.length > 0) { rows.push(testButtonEntries.splice(0, size)); } // 使用 map 函数生成 HTML const data = rows.map((row) => { const elements = row.map((ele) => { const { button_title, link, button_image, button_alt_text } = ele; return `
`; }); return `${elements.join('')}`; }); // 将生成的 HTML 插入到容器中 $("#employee-button-container").html(data.join(''));});
代码解释
数据准备: testButtonEntries 数组包含了按钮的数据，每个对象包含 button_title, button_alt_text, button_image, 和 link 属性。
分割数组: while 循环和 splice 方法用于将 testButtonEntries 数组分割成多个小数组，每个小数组最多包含 size (15) 个元素。rows 数组存储了这些分割后的小数组。
生成 HTML:
外层的 map 函数遍历 rows 数组，为每个小数组（即每“行”）生成一个 carousel-item div。内层的 map 函数遍历每个小数组中的元素，为每个元素生成一个包含链接和图像的 div。使用了模板字符串 (`…${}`) 来动态地构建 HTML 字符串，使代码更易读。
插入 HTML: $(“#employee-button-container”).html(data.join(”)) 将生成的 HTML 字符串插入到 ID 为 employee-button-container 的元素中。 join(”) 用于将数组转换为字符串。
注意事项
确保 images/ 目录下存在对应的图片文件。根据实际需求调整 size 变量的值，以控制每组按钮的数量。可以根据实际情况修改 HTML 结构和 CSS 类名，以适应不同的布局和样式需求。如果数据源是 JSON 或 XML，需要先将其解析成 JavaScript 对象，然后再进行处理。在实际应用中，应考虑错误处理和数据验证，以确保代码的健壮性。例如，检查 testButtonEntries 是否为空，以及每个对象是否包含必需的属性。
总结
通过使用 slice 和 map 方法，我们可以高效地根据数据动态生成 HTML 结构，并将其插入到页面中。这种方法不仅代码简洁，而且易于维护和扩展。同时，使用模板字符串可以提高代码的可读性，使代码更加清晰易懂。记住，根据实际需求调整代码，并添加适当的错误处理和数据验证，可以使代码更加健壮和可靠。
以上就是使用 jQuery 动态生成按钮/链接列表的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/150678.html
微信扫一扫 
支付宝扫一扫 
