javascript - 函数未定义，参数格式化

Question

我正在尝试创建我自己的灯箱脚本，我可以在其中以像这样的干净格式传递变量(标题、描述、项目类型、项目 ID 等)(受 fancybox 启发):

myFunction({ 
    title: "My title",
    description: "My description" 
});

单击某个元素会使用 jQuery 将一些 HTML 前置到 div。

我改编了一段我在 Stackoverflow 上找到的代码并且“有点”理解了代码。在我编辑底部代码之前，顶部函数没有更改和工作，我添加了 click(function() { } 因为在示例中代码是在页面加载时执行的。

但是，当我点击我的 H1 元素时， Firebug 控制台告诉我ReferenceError: popup is not defined

这是我的 Javascript:

$(document).ready(function() {
    (function ($) {

        $.fn.popup = function (options) {
            var settings = $.extend({
                title: function (someData) {
                    return someData;
                },
                description: function (someData) {
                    return someData;
                },
            }, options);
            $("#content").prepend(
                "<div style=\"position:fixed;top:0;left:0;width:100%;height:100%;background:#FFFFFF;\">\
                    <h1>"+ settings.title +"</h1>\
                    <p>" + settings.description +"</p>\
                </div>"
            );
        }; 
    }(jQuery));

    $(".openbox1").click(function() {
        popup({
            title: "Title 1",
            description: "Description 1"
        });
    }));

    $(".openbox2").click(function() {
        popup({
            title: "Title 2",
            description: "Description 2"
        });
    }));
});

这是我的HTML

<div id="content">
    <h1 class="openbox1">open box 1</h1>
    <h1 class="openbox2">open box 2</h1>
</div>

Answer 1

一个。 Wolff 评论说我需要像这样执行函数:

$(".openbox1").click(function() {
    $(this).popup({
        ...
    });
});

这解决了，谢谢!