javascript - 需要帮助将对象值作为 jQuery 选择器拉入

Question

总的来说，我对 OOP 概念还很陌生，我正在尝试为客户构建这个迷你应用程序。这个想法是，它应该具有基于模块编号等的可配置选项。我已经删除了一些代码来保留相关的内容。我正在尝试使其尽可能可定制，特别是允许编码器通过将多个灯箱式弹出窗口添加到下面的选项数组来支持它们。

一切都工作得很好，直到这 - 我的问题是我试图用 jQuery 绑定(bind) options.popups 数组中的每个对象，通过输入 selector 作为通过配置直接将字符串放入 $() 选择器中。

这对于将 click() 绑定(bind)到 opener 来说效果很好，但 selector 属性不会绑定(bind)。每次，我都会收到此错误: TypeError: self.options.popups[i] is undefined. 如果我直接插入选择器，例如$(".helpPopup").show();，它工作正常。如果我在其正上方的 click() 函数内的变量中定义它，它就可以工作。例如var s = ".helpPopup";

我在这里遗漏了一些明显的东西吗？这让我抓狂。另外，我的代码的设计模式直接基于此:https://github.com/shichuan/javascript-patterns/blob/master/jquery-plugin-patterns/prototypal-inheritance.html

谢谢!

var MODULE = {
    init: function(options, elem) {
        // Stuff here

        this.bindPopups();
    },

    options: {
        title: "Module title",
        pages: 1,
        currentPage: 1,
        windowOpener: ".popupVar",
        popups: [
            { 
                name: "help", 
                selector: ".helpPopup", 
                opener: ".button.open", 
                closer: ".button.close",
                type: 3
            }
        ]
    },

    bindPopups: function() {
        var self = this;

        for(i = 0; i < this.options.popups.length; i++) {
            // Open the popup
            $(self.options.popups[i].opener).click(function(e) {
                e.preventDefault();
                $(self.options.popups[i].selector).show();
            });

            // Close the popup
            $(self.options.popups[i].closer).click(function(e) {
                e.preventDefault();
                $(self.options.popups[i].selector).hide();
            });
        }
    }
};

// If browser doesn't support Object.create
if(typeof Object.create !== "function") {
    Object.create = function(o) {
        function F() {
            F.prototype = o;
            return new F();
        }
    };
}

// Create plugin
$.plugin = function(name, object) {
    $.fn[name] = function(options) {
        return this.each(function() {
            if(!$.data(this, name)) {
                $.data(this, name, Object.create(object).init(options, this));
            }
        });
    };
};

$.plugin("module", MODULE);



/* PAGE CODE */
<script>
    $(function() {
        $("body").module({
            title: "Module 1",
            pages: 12,
            popups: [
                { 
                    name: "help", 
                    selector: ".helpPopup", 
                    opener: ".button.open", 
                    closer: ".button.close",
                    type: 3
                },
                {
                    name: "info",
                    selector: ".infoPopup",
                    opener: ".button.info",
                    closer: ".button.close",
                    type: 1
                }
            ]
        });
    });
</script>

Answer 1

由于某种原因，您的 i 在您的点击函数中递增。要进行验证，请在单击事件函数之前放置一个 console.log(i);，并在打开单击函数内放置一个。

我不知道为什么要这样做(我没有看到任何明显的错误)，但一个快速的技巧是在打开后立即放置 var j = i; for 循环，并使用 j 作为索引选择器。

编辑:上面的 hack 仅适用于一次迭代。 i 在这里“看起来”是递增的，因为直到 for 循环关闭之后才会计算它，此时 i 已递增(对于点击事件)。您可以通过在 setTimeout 函数中记录 i 来验证这一点。

要获取适当的 i 值，您必须将点击事件函数包装在匿名函数中，如下所示:

$(self.options.popups[i].opener).click(
    (function (i) { 
        return function(e) {
            e.preventDefault();
            $(self.options.popups[i].selector).show();
        }
    })(i)
);

了解更多信息