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

时间:2017-04-12 02:23:59

标签: javascript jquery jquery-3

我有一个在通用表上运行的函数,它不具体,它需要能够在许多不同的表上运行。我遇到的问题是它是否在同一页面上的多个表上运行。单击事件触发得很好,但是它们只对最终表中的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')元素的变量,它被传递给函数。

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

1 个答案:

答案 0 :(得分: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。)