Question

对不起标题不是很清楚，我不确定是什么问题。如果有人有更好的主意，我会很乐意重命名。

我有一堆带有'thing-box'类的盒子，通过点击我给出的'something-button'类的各种东西来调用它们。所有的盒子都有一类'模态盒'，所有盒子都包含在一个部分透明的div中，它可以覆盖屏幕的其余部分（'模态 - 遮挡'）。而不是为每个代码编写完全相同的代码（我正在做的）我决定创建一个函数来将相关的点击处理程序附加到每个按钮（以及随之而来的各种其他内容）。我有以下js代码：

    function modal(selector) {
        button = $(selector+'-button');
        box = $(selector+'-box');
        button.click(function(e) {
            e.stopPropagation();
            $('.modal-box').hide();
            $(document).off('.hideDoc');
            $('.modal-blackout').show();
            box.show();
            $(document).on('click.hideDoc', function(e) {

                if (!box.is(e.target) && box.has(e.target).length === 0)
                {
                    $('.modal-blackout').hide();
                    box.hide();
                    $(selector + '-box .error-message').html('');
                    $(document).off('.hideDoc');
                }
            });
            e.preventDefault();
        });
    }

    modal('.password-reset');
    modal('.login');
    modal('.signup');

但现在每个按钮都会显示.signup-box（或者最后一个名称）。请注意，如果我删除该函数并在代码中的任何地方使用不同的选择器手动将其写出三次，它就会按照我的意图运行。

怀疑这里有一些基本的东西我不明白。谁能解释一下？

Answer 1

您每次调用modal()时都会创建被覆盖的全局变量。这导致box始终引用使用最后一个选择器选择的框，类似于button。

对于button，它并不是真正的问题，因为您只使用过一次。但是，对box的引用必须保持准确，因为它在click事件处理程序中使用。

替换：

function modal(selector) {
    button = $(selector+'-button');
    box = $(selector+'-box');

使用：

function modal(selector) {
    var button = $(selector+'-button');
    var box = $(selector+'-box');

这将导致在modal范围内创建这些变量，因此对modal的后续调用无法覆盖为先前选择器设置的变量。

Answer 2

在你的函数中，box前面没有var关键字，这意味着它可以是全局变量，也可以属于外部范围。

事件处理程序通过闭包获取对此框的引用，因此当函数的下一次调用重新定义box时，所有这些函数都将对框的当前值起作用。

最简单的解决方案是通过声明并将其指定为

来使函数本地化

var box = ...

如果在外部函数中定义了box，并且你没有故意重新声明它 - 那么，你做错了。由于您正在重新分配它的值，因此我认为不能在modal之外声明它。

Javascript函数覆盖自己

2 个答案: