对给定类的所有元素应用切换

Question

我正在尝试使用{{data()}}将切换功能应用于文档中的所有元素。

我可以按类名将它应用于一个元素。像：

classname="demo-sw"

如何将其应用于所有类别为<input id="demo1" class="switchery switchery-primary" type="checkbox" data-switchery="true"> new Switchery(document.document.getElementById('demo1'), {color:'#489eed'}); 的元素。

我试过了：

demo-sw

和

$('.demo-sw').each(function(i, obj) {
    new Switchery($(this), {color:'#489eed'})
});

但它不起作用。

Answer 1

从documentation，您可以使用querySelectorAll向插件提供DOMElements列表：

var elems = document.querySelectorAll('.demo-sw');
var init = new Switchery(elems, { color:'#489eed' });

如果您更喜欢使用jQuery，那么您需要单独遍历所选元素并在其上实例化插件：

$('.demo-sw').each(function() {
    new Switchery(this, { color:'#489eed' })
});

其中，前者是更好的做法。

Answer 2

试试这个： - https://jsfiddle.net/adiioo7/313ube9h/

<强> JS： -

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

elems.forEach(function(html) {
  var switchery = new Switchery(html);
});

<强> HTML： -

<input type="checkbox" class="js-switch" checked />

<input type="checkbox" class="js-switch" checked />

<input type="checkbox" class="js-switch" checked />

Reference