将动态创建的复选框输入转换为 Switchery 样式的开关答案

【问题标题】：Convert dynamically created checkbox input to Switchery-style switch将动态创建的复选框输入转换为 Switchery 样式的开关
【发布时间】：2020-05-02 23:28:40
【问题描述】：

我需要动态创建一个Switchery 开关。

我正在创建这样的非动态开关：

<div class="item form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12">Admin User</label>
   <div class="col-md-6 col-sm-6 col-xs-12">
      <input type="checkbox" class="js-switch" id= "canModify"/>
   </div>
</div>

这很好用。

但是，当我像这样通过 JavaScript 创建相同的结构时：

  html = '<input type="checkbox" class="js-switch" id= "' + elementID +  '"/>'

我得到了这些结果：

下面是静态添加的，它显示正确。上面的一个是动态生成的，但它只显示为一个复选框。所以我的问题是，我该如何解决这个问题？

【问题讨论】：

如果你包含加载和调用 Switchery 的 JavaScript 就好了。
我从不“打电话”切换。只需使用加载库即可。（它位于 HTML 文件的底部。

标签： javascript html twitter-bootstrap switchery

【解决方案1】：

仅使用class="js-switch" 向 DOM 添加新输入不会创建Switchery 样式的开关。

必须为每个输入创建一个 JavaScript Switchery 对象。

此函数会将 DOM 中的所有非切换输入转换为切换式开关：

// convert all inputs with class="js-switch" to Switchery
function convertToSwitchery() {

  // get all "js-switch" class inputs in the DOM
  const jsSwitchInputs = document.querySelectorAll('.js-switch');

  jsSwitchInputs.forEach(input => {
    // ignore if input is already switchery
    if (input.dataset.switchery) {
      return;
    }
    // create new Switchery object
    new Switchery(input);
  });
}

一个工作示例：

// convert all inputs with class="js-switch" to Switchery-style
function convertToSwitchery() {
  const jsSwitchInputs = document.querySelectorAll('.js-switch');
  jsSwitchInputs.forEach(input => {
    // ignore if input is already switchery
    if (input.dataset.switchery) {
      return;
    }
    new Switchery(input);
  });
}



// code for demo only:
const divResult = document.getElementById('result');
let iButton = 0;

// add a new "js-switch" input
function addInput() {
  const br = document.createElement('br');
  divResult.appendChild(br);
  const label = document.createElement('label');
  label.for = `input${++iButton}`;
  label.className = 'mr-4';
  label.innerHTML = `Dynamic "js-switch" ${iButton} `;
  divResult.appendChild(label);
  const input = document.createElement('input');
  input.type = 'checkbox';
  input.className = 'js-switch';
  input.id = `input${iButton}`;
  divResult.appendChild(input);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/switchery-latest@0.8.2/switchery.css" rel="stylesheet" />

<div class="p-4">
  <h4>Convert Checkbox Inputs to Switchery Style</h4>
  <button class="btn btn-primary btn-sm" onclick="addInput();">
    Add ".js-switch"</button>
  <button class="btn btn-primary btn-sm"
    onclick="convertToSwitchery();">
    Convert All to Switchery</button>
    
  <div class="mt-4" id="result">
    <label for="static-input">Static "js-switch"</label>
    <input type="checkbox" class="js-switch" checked />
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/switchery-latest@0.8.2/dist/switchery.min.js"></script>

参考资料：

Switchery on npm

【讨论】：

这不起作用。它什么也没做。是应该在某处分配的变量。 html 是表单应用程序的一部分，以防万一……
@aarelovich 我更新了答案以包含一个通用解决方案和一个工作演示。
谢谢。这很重要，所以它会帮助别人
顺便说一句，Bootstrap 有一个内置的自定义开关类，称为custom-switch。它几乎与 Switchery 相同，不需要 JavaScript。 getbootstrap.com/docs/4.4/components/forms/#switches
我以前只知道！谢谢！

【解决方案2】：

查看文档后，我确实发现了一些有效的方法。

我需要先将代码添加到包含开关的实际元素中。

   document.getElementById("mainPanel").innerHTML = html;

只有在添加代码后，我才能使用从文档中复制和粘贴的这两行启用切换

   // This is required to enable Switchery. 
   var elem = document.querySelector('.js-switch');
   var init = new Switchery(elem);

希望这对其他人有帮助！

【讨论】：