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

Question

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

代码如下:

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

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

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