使用 jQuery 动态生成按钮/链接列表-js教程-PHP中文网

使用 jQuery 动态生成按钮/链接列表

霞舞

发布： 2025-07-07 18:36:01

原创

440人浏览过

使用 jquery 动态生成按钮/链接列表

本文将介绍如何使用 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 `<div class=""><a href="${link}" title="${button_title}" target="_blank">@@##@@</a></div>`;
        });
        return `<div class="carousel-item"><div class="d-flex flex-wrap">${elements.join('')}</div></div>`;
    });

    // 将生成的 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('') 用于将数组转换为字符串。