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

Question

我有一个在通用表上运行的函数，它不能是特定的，它需要能够在许多不同的表上运行。我遇到的问题是它是否在同一页面上的多个表上运行。点击事件触发得很好，但它们只作用于最终表格中的检查元素，而不是它们应该处理的表格中的检查元素。

代码如下：

            $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') 元素，它被传递到函数中。

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

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');

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

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