Question

我有一个Datatables表设置了一个列，使用Switchery 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' });
        });
    });

但显然它在返回第一页时重新初始化复选框，因此每次都有2个开关和一个额外的开关等。

所以我尝试在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' });
        });
    });

但是这不起作用，我确信它是简单的：not（）？对此的任何帮助将不胜感激。

此致

罗布。

Answer 1

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

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

你拥有的选择器是不可能的。或者，相反，即使元素具有:not()类，switched部分也始终匹配。你说，“让我的元素有一个'js-switch'类，其class属性正好'切换'。”如果class属性完全'切换'，它也不能有'js-switch'类。

jquery复选框插件没有初始化数据表分页

1 个答案: