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

我尝试创建一个函数，允许有不同数量的对“弹出”/“打开按钮”。每个开启器按钮都应打开相应的弹出窗口。但它不起作用，我不明白为什么。请帮助我找到问题的根源，并建议解决方案，以获得我希望看到的结果

问题:

脚本：

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();
                }
            });
        }
    }
}

函数InitPopupOpener（选项）{
if（options.opener.length==options.popup.length）{
对于（变量i=0；i

---

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

问题是，对于您创建的所有匿名函数，

popup

和

opener

变量都是相同的；它们将保持在

for

循环末尾的状态。（这是因为

您需要引入另一个匿名函数，作为

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]);
        }
    }
}

函数InitPopupOpener（选项）{
if（options.opener.length==options.popup.length）{
对于（变量i=0；i

您可以看到这个（jsfiddle），我相信它可以满足您的需求