Question

我尝试创建允许具有不同数量的对的功能＆＃34;弹出＆＃34; /＆＃34;开启按钮＆＃34;。每个开启者按钮都应该打开适当的弹出窗口。但它不起作用，我无法理解为什么。请帮助我找到问题的根源和建议解决方案，以获得我想要的结果。

脚本：

function InitPopupOpener(options) {
    if (options.opener.length == options.popup.length) {
        for (var i = 0; i < options.opener.length; i++) {
            var opener = '.' + options.opener[i];
            var popup = '.' + options.popup[i];
            console.log(opener);
            $(opener).click(function (event) {
                $(popup).toggle();
            });

            $(document).click(function (event) {
                if ($(event.target).closest(popup).length == 0 && $(event.target).attr('class') != opener.substr(1)) {
                    $(popup).hide();
                }
            });
        }
    }
}

现在它仅适用于第二个弹出窗口。

Answer 1

问题是变量popup和opener对于您创建的所有匿名函数都是相同的;它们将在for循环结束时保留为它们的任何内容。（这是因为how Javascript scope works。）

你需要的是引入另一个匿名函数作为每个for循环调用的作用域：

function InitPopupOpener(options) {
    if (options.opener.length == options.popup.length) {
        for (var i = 0; i < options.opener.length; i++) {
            (function(opener, popup) {
                console.log(opener);
                $(opener).click(function (event) {
                    $(popup).toggle();
                });

                $(document).click(function (event) {
                    if ($(event.target).closest(popup).length == 0 && $(event.target).attr('class') != opener.substr(1)) {
                        $(popup).hide();
                    }
                });
            })('.' + options.opener[i], '.' + options.popup[i]);
        }
    }
}

你可以看到这个in action here（jsfiddle），我认为你可以做到这一点。

创建功能，允许具有不同数量的弹出窗口和可隐藏它的按钮

1 个答案: