0

我有一个从 datatables.net 动态填充数据表 jquery 插件的页面。

在页面上生成了 4 个表，这是由 .each jquery 调用执行的。我已经设置了一个数组来保存这些数据表： 

oTable[x].

数据填充数据表后，我必须通过调用此函数来实例化过滤：

oTable[x].fnFilter("^" + $(this).val() + "$", 8, true);

我有一个计数器运行，每次创建新表时都会计数。我试图通过这样做使用for循环来处理过滤：

 for (var x = 1; x < counter; x++) {
    $("#selectMetricImperial" + x).live('change', function () { oTable[x].fnFilter("^" + $(this).val() + "$", 8, true); });
  }

不幸的是，它似乎不起作用。当我通过下拉菜单执行过滤时，它会转到 .live 行，但每个人都以 x=1 的形式执行。我认为还有其他问题。

此代码确实有效，但不是动态的：

$("#selectMetricImperial" + 1).live('change', function () { oTable[1].fnFilter("^" + $(this).val() + "$", 8, true); });
$("#selectMetricImperial" + 2).live('change', function () { oTable[2].fnFilter("^" + $(this).val() + "$", 8, true); });
$("#selectMetricImperial" + 3).live('change', function () { oTable[3].fnFilter("^" + $(this).val() + "$", 8, true); });
$("#selectMetricImperial" + 4).live('change', function () { oTable[4].fnFilter("^" + $(this).val() + "$", 8, true); });

我想要发生的是根据在创建数据表的 .each 循环末尾传入的计数器动态生成上述代码。例如，如果 counter=5 则将生成上述语句中的 5 个，以便过滤适用于每个下拉列表。

我希望我能正确解释这一点。如果没有，请提出问题，我会调整我的问题以更好地解决我的问题。

谢谢你们的帮助！

4

1 回答 1

2

我建议你使用类选择器。对于每个选择，添加一个类，例如“selectchange”。

然后只使用一个选择器，而不是循环：

$(".selectchange").on("change", 
    function() 
    { 
        var id = this.id.substring("selectMetricImperial".length);
        alert(id);
        alert($(this).val());
        oTable[id].fnFilter("^" + $(this).val() + "$", 8, true);
    }
);

看到这个jsfiddle：http: //jsfiddle.net/KAqfk/

如果你想让它按你的方式工作，你需要传入“x”作为参数：

for (var x = 1; x < counter; x++) {
    $("#selectMetricImperial" + x).live('change', x, 
        function (e) { oTable[e.data].fnFilter("^" + $(this).val() + "$", 8, true); });
  }

在您的原始代码中，您在内联函数中使用 x ，但是当函数执行时 x 的值是未知的（它可能是 for 循环退出时的值，除非您在其他地方使用 x ）。我知道这可能会造成混淆，但您必须小心使用内联函数。代码$("#selectMetricImperial" + x)知道 x 是什么。但是在触发 change 事件之前，不会调用内部函数，此时 x 可以是任何东西。

烧烤

于 2013-06-10T10:05:08.970 回答