函数仅在调用它的最新元素上运行

Question

我有一个函数运行在通用 table 上，它不能具体，它需要能够在许多不同的 [=21] 上运行 =]秒。我遇到的问题是它是否在同一页面上的多个 table 上是运行。单击事件触发得很好，但它们只对最终 table 中的检查元素进行操作，而不是 table 中它们应该处理的检查元素。

代码如下：

            $parent = $table.parents('div.ibox').find('div.ibox-title');
            $select_all = $parent.find('button.select_all');
            $deselect_all = $parent.find('button.deselect_all');
            $input_delete = $table.find('input.delete');

            if ($table.find('input.delete').length >= 2) {
                $select_all.removeClass('hidden');
            } else {
                $select_all.addClass('hidden');
                $deselect_all.addClass('hidden');
            }

            $select_all.on('click', function(event) {
                $input_delete.each(function() {
                    $(this).prop('checked', true).trigger('change');
                    $select_all.addClass('hidden');
                    $deselect_all.removeClass('hidden');
                });
            });

            $deselect_all.on('click', function(e) {
                $table.find('input.delete:checked').each(function() {
                    $(this).prop('checked', false).trigger('change');
                    $deselect_all.addClass('hidden');
                    $select_all.removeClass('hidden');
                });
            });

$table 是一个包含 $('table') 函数的变量运行，它被传递到函数中。

只是想知道是否有人对如何让点击元素在 table 内的复选框上触发他们应该有任何想法，而不是页面上的最终 table。

Answer 1

假设除了实际的 function someFunc() { 和关闭 } 部分之外，您没有从函数中遗漏任何代码，这些行：

        $parent = $table.parents('div.ibox').find('div.ibox-title');
        $select_all = $parent.find('button.select_all');
        $deselect_all = $parent.find('button.deselect_all');
        $input_delete = $table.find('input.delete');

...所有声明（或更新）全局变量。因此，在函数运行几个不同的 table 之后，这些变量将继续引用 last table 的元素。

这些变量都应该用 var 声明，使它们在您的函数中是局部的。然后你的点击事件处理程序将引用他们自己的变量而不是共享全局变量。（即使在包含函数完成后，点击处理程序仍可以继续引用其包含范围内的局部变量，因为 closures。）

函数仅在调用它的最新元素上运行

Function only runs on latest elements it was called on

javascript

jquery

jquery-3