jquery复选框插件不初始化可数据分页

Question

我有一个数据表设置一列使用开关iPhone开关插件的复选框，这是很好的工作。但是，在使用分页时，在第二个(或随后的)页面上，插件不会被初始化。以下是Switchery的初始化代码：

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

    elems.forEach(function(html) {
      var switchery = new Switchery(html, { color: '#00a45a', secondaryColor: '#8f0a05' });
    });

我试过这个：

$('.dataTables_paginate ul.pagination li a').click(function() {
        var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

        elems.forEach(function(html) {
          var switchery = new Switchery(html, { color: '#00a45a', secondaryColor: '#8f0a05' });
        });
    });

但是很明显，当返回到第一页时，它会重新初始化复选框，所以每次都有两个开关和一个额外的开关等等。

因此，我尝试添加一个“打开”init类，如下所示：

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

    elems.forEach(function(html) {
      var switchery = new Switchery(html, { color: '#00a45a', secondaryColor: '#8f0a05' });
      $('.js-switch').each(function() {
        $(this).addClass('switched');
      });
    });

然后过滤出像这样的页面：

$('.dataTables_paginate ul.pagination li a').click(function() {
        var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch:not([class="switched"])'));
        console.log(elems);

        elems.forEach(function(html) {
          var switchery = new Switchery(html, { color: '#00a45a', secondaryColor: '#8f0a05' });
        });
    });

但这是行不通的，我肯定这是简单的:不()？如果能在这方面提供任何帮助，我们将不胜感激。

致以敬意，

罗伯。

Answer 1

不要使用属性选择器，而是使用类选择器：

'.js-switch:not(.switched)'

你所拥有的选择是不可能的。或者，更确切地说，:not()部分总是匹配的，即使元素有一个switched类。您的意思是，“为我获取具有‘js’类并且其类属性完全是‘switch’的元素。”如果class属性是完全“交换”的，那么它也不能有一个‘js’类。