纯JavaScript动态添加Bootstrap Toggle开关组件教程-js教程-PHP中文网

纯JavaScript动态添加Bootstrap Toggle开关组件教程

本教程详细介绍了如何使用纯javascript动态创建并激活bootstrap toggle开关组件。通过创建html `input`元素并设置必要的`data-toggle`属性，然后将其添加到dom中，并最终利用jquery的`bootstraptoggle()`方法对其进行初始化，实现页面元素的按需动态生成与功能激活。

在现代Web应用开发中，动态地添加或移除页面元素以响应用户操作或数据变化是常见的需求。Bootstrap Toggle是一个流行的jQuery插件，它能将标准的HTML复选框转换为美观的开关按钮。本教程将深入探讨如何仅使用JavaScript（结合其依赖jQuery）来动态创建并激活这些Bootstrap Toggle开关组件。

环境准备

为了成功实现动态添加Bootstrap Toggle开关，您需要引入以下CSS和JavaScript库。这些库应在您的HTML文件的<head>或<body>标签结束前引入，并确保jQuery在Bootstrap和Bootstrap Toggle之前加载。

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- Bootstrap Toggle CSS -->
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">

<!-- jQuery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Bootstrap JS (bundle includes Popper.js) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<!-- Bootstrap Toggle JS -->
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

登录后复制

HTML容器准备

首先，我们需要在HTML中创建一个父级元素，作为我们动态生成开关的宿主。这个元素可以是一个简单的div，通过其id属性在JavaScript中被引用。

<div id="switch-host" class="p-3 border rounded">
  <h3>动态开关容器</h3>
</div>
<button id="addSwitchButton" class="btn btn-primary mt-3">添加新开关</button>

登录后复制

JavaScript核心逻辑

动态添加Bootstrap Toggle开关的核心在于以下几个步骤：

立即学习“Java免费学习笔记（深入）”；

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

创建input元素: 使用document.createElement("input")创建一个新的HTML input元素。
设置属性: 为input元素设置必要的属性，如type="checkbox"和data-toggle="toggle"。data-toggle="toggle"是告诉Bootstrap Toggle插件需要处理这个元素的关键属性。您还可以设置其他属性，例如checked来定义初始状态，data-onstyle、data-offstyle来定义开关的样式，以及id或name等。
添加到DOM: 将创建好的input元素追加到预设的父级容器中。
初始化Toggle: 这是最关键的一步。仅仅将input元素添加到DOM并不能使其变为Bootstrap Toggle的样式。您必须使用jQuery选择器选中新添加的input元素，并调用.bootstrapToggle()方法来激活其功能和样式。

以下是实现上述逻辑的JavaScript函数：

/**
 * 动态添加一个Bootstrap Toggle开关到指定的宿主元素。
 * @param {string} hostId - 宿主元素的ID。
 * @param {boolean} initialState - 开关的初始状态（true为开，false为关）。
 */
function addBootstrapSwitch(hostId, initialState = false) {
  const host = document.getElementById(hostId);
  if (!host) {
    console.error(`宿主元素ID为 "${hostId}" 不存在。`);
    return;
  }

  // 1. 创建 input 元素
  const inputEl = document.createElement("input");
  inputEl.setAttribute("type", "checkbox");
  inputEl.setAttribute("data-toggle", "toggle");
  inputEl.checked = initialState; // 设置初始状态

  // 可选：设置其他属性，例如样式、文本等
  inputEl.setAttribute("data-onstyle", "success");
  inputEl.setAttribute("data-offstyle", "danger");
  inputEl.setAttribute("data-on", "启用");
  inputEl.setAttribute("data-off", "禁用");
  inputEl.id = `dynamicSwitch-${Date.now()}`; // 确保ID唯一性

  // 创建一个包含开关的div，方便布局
  const switchWrapper = document.createElement("div");
  switchWrapper.className = "mb-2"; // 添加一些底部边距

  // 2. 将 input 元素添加到 wrapper
  switchWrapper.appendChild(inputEl);

  // 3. 将 wrapper 添加到宿主
  host.appendChild(switchWrapper);

  // 4. 初始化 Bootstrap Toggle：这是关键步骤！
  // 必须在元素被添加到DOM后，才能对其调用 bootstrapToggle() 方法
  $(inputEl).bootstrapToggle();

  // 示例：为动态添加的开关绑定事件
  $(inputEl).change(function() {
    console.log(`开关 ${inputEl.id} 的状态变为: ${$(this).prop('checked') ? '开' : '关'}`);
  });
}

// 绑定按钮点击事件，动态添加开关
document.addEventListener('DOMContentLoaded', () => {
  const addButton = document.getElementById('addSwitchButton');
  if (addButton) {
    let switchCount = 0;
    addButton.addEventListener('click', () => {
      addBootstrapSwitch("switch-host", switchCount % 2 === 0); // 交替初始状态
      switchCount++;
    });
  }
});

登录后复制

完整示例代码

将所有上述代码片段组合起来，您将得到一个完整的HTML文件，可以在浏览器中直接运行以测试动态添加功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯JavaScript动态添加Bootstrap Toggle开关</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- Bootstrap Toggle CSS -->
    <link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">

    <style>
        body { padding: 20px; }
        .toggle.btn { min-width: 100px; } /* 确保开关有足够的宽度 */
    </style>
</head>
<body>

    <div class="container">
        <h2 class="mb-4">动态添加Bootstrap Toggle开关</h2>

        <div id="switch-host" class="p-3 border rounded mb-4">
            <p>点击下方按钮，将在此容器中添加新的Bootstrap Toggle开关。</p>
        </div>

        <button id="addSwitchButton" class="btn btn-primary">添加新开关</button>
    </div>

    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <!-- Bootstrap JS (bundle includes Popper.js) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
    <!-- Bootstrap Toggle JS -->
    <script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>

    <script>
        /**
         * 动态添加一个Bootstrap Toggle开关到指定的宿主元素。
         * @param {string} hostId - 宿主元素的ID。
         * @param {boolean} initialState - 开关的初始状态（true为开，false为关）。
         */
        function addBootstrapSwitch(hostId, initialState = false) {
            const host = document.getElementById(hostId);
            if (!host) {
                console.error(`宿主元素ID为 "${hostId}" 不存在。`);
                return;
            }

            // 1. 创建 input 元素
            const inputEl = document.createElement("input");
            inputEl.setAttribute("type", "checkbox");
            inputEl.setAttribute("data-toggle", "toggle");
            inputEl.checked = initialState; // 设置初始状态

            // 可选：设置其他属性，例如样式、文本等
            inputEl.setAttribute("data-onstyle", "success");
            inputEl.setAttribute("data-offstyle", "danger");
            inputEl.setAttribute("data-on", "启用");
            inputEl.setAttribute("data-off", "禁用");
            inputEl.id = `dynamicSwitch-${Date.now()}`; // 确保ID唯一性

            // 创建一个包含开关的div，方便布局
            const switchWrapper = document.createElement("div");
            switchWrapper.className = "mb-2 d-flex align-items-center"; // 添加一些底部边距和对齐

            // 添加一个标签来描述开关
            const labelEl = document.createElement("label");
            labelEl.setAttribute("for", inputEl.id);
            labelEl.textContent = `开关 ${inputEl.id.split('-')[1]}: `;
            labelEl.className = "mr-2"; // 右边距

            // 2. 将 input 元素添加到 wrapper
            switchWrapper.appendChild(labelEl);
            switchWrapper.appendChild(inputEl);

            // 3. 将 wrapper 添加到宿主
            host.appendChild(switchWrapper);

            // 4. 初始化 Bootstrap Toggle：这是关键步骤！
            // 必须在元素被添加到DOM后，才能对其调用 bootstrapToggle() 方法
            $(inputEl).bootstrapToggle();

            // 示例：为动态添加的开关绑定事件
            $(inputEl).change(function() {
                console.log(`开关 ${inputEl.id} 的状态变为: ${$(this).prop('checked') ? '开' : '关'}`);
                // 可以在这里执行其他逻辑，例如更新后端数据
            });
        }

        // 绑定按钮点击事件，动态添加开关
        document.addEventListener('DOMContentLoaded', () => {
            const addButton = document.getElementById('addSwitchButton');
            if (addButton) {
                let switchCount = 0;
                addButton.addEventListener('click', () => {
                    addBootstrapSwitch("switch-host", switchCount % 2 === 0); // 交替初始状态
                    switchCount++;
                });
            }
        });
    </script>

</body>
</html>

登录后复制

注意事项

依赖顺序: 确保jQuery在Bootstrap JavaScript和Bootstrap Toggle JavaScript之前加载。如果顺序错误，插件将无法正常工作。
ID唯一性: 如果您动态添加多个开关，并且每个开关都需要一个唯一的标识符（例如，用于事件处理或数据绑定），请确保为每个新创建的input元素生成一个唯一的id。在示例中，我们使用了Date.now()来辅助生成唯一ID。
事件处理: 对于动态添加的元素，直接绑定事件（如inputEl.addEventListener('change', ...)）是有效的。如果您需要使用事件委托来处理大量动态元素的事件，可以考虑在父级容器上绑定事件，并利用事件冒泡来捕获子元素的事件。例如：
```
$('#switch-host').on('change', 'input[data-toggle="toggle"]', function() {
    console.log(`通过事件委托捕获到开关状态变化: ${$(this).prop('checked')}`);
});
```
登录后复制
性能: 大量动态添加DOM元素可能会影响页面性能。如果需要添加成百上千个开关，请考虑虚拟化或分页等优化策略。

总结

通过上述教程，我们详细学习了如何使用纯JavaScript结合jQuery来动态创建并激活Bootstrap Toggle开关组件。关键在于创建正确的HTML input元素，设置data-toggle="toggle"属性，将其添加到DOM，并最终通过调用$(element).bootstrapToggle()方法来初始化其功能。掌握这一技术，可以帮助开发者构建更加灵活和交互性强的Web界面。

以上就是纯JavaScript动态添加Bootstrap Toggle开关组件教程的详细内容，更多请关注php中文网其它相关文章！