使用 jQuery 动态创建按钮组：一种高效的方法-js教程-PHP中文网

使用 jQuery 动态创建按钮组：一种高效的方法

霞舞

发布： 2025-07-07 19:08:02

原创

416人浏览过

使用 jquery 动态创建按钮组：一种高效的方法

本文将介绍如何使用 jQuery 从数据源动态生成一系列按钮，并将其组织成具有特定结构的 HTML。通过分割数据并使用 map 函数，可以高效地创建包含链接和图像的按钮组，适用于各种数据驱动的 Web 应用场景。

在 Web 开发中，动态生成 HTML 元素是一种常见的需求。例如，我们可能需要根据从服务器获取的数据，动态创建一系列按钮或链接。本文将演示如何使用 jQuery 和 JavaScript 来实现这一目标，重点在于如何高效地处理数据，并将其转换为所需的 HTML 结构。

数据准备

首先，我们需要准备用于生成按钮的数据。这些数据可以来自 JSON 文件、XML 文件或静态数组。在本例中，我们使用一个静态数组 testButtonEntries 作为示例：

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 Last', button_alt_text: 'Employee Alt Text Last', button_image: 'emp_button_title_last', link: 'insertsomelinkhere.org' }
];

登录后复制

这个数组包含了每个按钮所需的信息，例如标题、alt 文本、图像 URL 和链接地址。

数据分割

为了将按钮分组显示，我们需要将原始数据分割成多个小数组，每个小数组包含特定数量的按钮。例如，我们可以将数据分割成每组 15 个按钮：

const rows = [];
const size = 15;

while (testButtonEntries.length > 0){
    rows.push(testButtonEntries.splice(0, size));
}

登录后复制

这段代码使用 splice 方法将 testButtonEntries 数组分割成多个小数组，并将这些小数组存储在 rows 数组中。

HTML 生成

接下来，我们使用 map 函数遍历 rows 数组，并为每个小数组生成相应的 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>`;
});
$("#employee-button-container").html(data.join(''));

登录后复制

这段代码首先使用 map 函数遍历 rows 数组，并为每个小数组生成一个包含多个按钮的 HTML 字符串。然后，它使用 map 函数遍历每个小数组，并为每个按钮生成一个包含链接和图像的 HTML 字符串。最后，它将所有生成的 HTML 字符串连接起来，并将其插入到 id 为 employee-button-container 的元素中。

完整代码示例

以下是完整的代码示例：

$(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));
    }

    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>`;
    });
    $("#employee-button-container").html(data.join(''));
});

登录后复制