Question

我对OOP概念一般都是新手，我正在尝试为客户端构建这个迷你应用程序。我们的想法是，它应该具有基于模块编号等的可配置选项。我已经删除了一些代码以保留相关内容。我试图让它尽可能地自定义，特别是 - 允许编码器通过将它们添加到下面的选项数组来支持多个Lightbox风格的弹出窗口。

在此之前一切都运行良好 - 我的问题是我正在尝试使用jQuery绑定options.popups数组中的每个对象，通过配置将selector作为字符串输入，直接进入$()选择器。

这适用于将click()绑定到开启者，但selector属性不会绑定。每次，我都会收到此错误：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 ，并使用i作为索引选择器。~~

编辑：上面的hack只适用于一次迭代。 for“似乎”在此处递增，因为直到i循环关闭后才会对其进行求值，此时i已递增（对于click事件）。您可以通过在setTimeout函数中记录i来验证这一点。

要获得$(self.options.popups[i].opener).click( (function (i) { return function(e) { e.preventDefault(); $(self.options.popups[i].selector).show(); } })(i) );的适当值，您必须将click事件函数包装在这样的匿名函数中：

{{1}}

了解更多信息

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

1 个答案: