设置将变量附加到 HTML onClick 事件的 jQuery 函数

Question

我正在尝试为 wordpress 创建一个图像滑块插件。我希望它做的一件事是在您点击图片时让图片全屏显示。

为了避免页面在加载时加载所有全尺寸图片，我想在用户点击图片时调用 jquery ajax 函数。

所以插件知道要加载什么图像，该函数接受该图像的 wordpress 附件 ID 参数，因此链接如下所示：

<a href='javascript:void(0)' onClick='fullscreen(123)'><img src="previewimage" /></a>

...这基本上意味着获取 ID 为 123 的图像并显示它。

我的 jQuery 不起作用，看起来像这样：

(function($) {

$.fn.fullscreen = function(id) {
    stage = $('#template-to-place-image-in');
    stage.css('display', 'block');

       $.ajax({
            // a bunch of ajax parameters that get the image with the requested id and then place it into the template
        });

    event.preventDefault();
    return false;
};

}(jQuery));

主要问题是当我尝试点击预览图像时，javascript 控制台给我一个错误提示：

Uncaught ReferenceError: fullscreen is not defined 

我对 javascript 和 jquery 很陌生，所以我猜这是一个非常简单的语法问题，但我不知道我做错了什么。如果有人可以提供帮助，那就太棒了:)

Answer 1

使用$.fn，您正在为 jQuery 创建一个额外的函数。所以你可以使用$(mySelector).fullscreen()访问他。

在这种情况下不需要创建 jQuery 函数。 使用以下 Javascript 代码：

(function($) {

    window.fullscreen = function(id) {
        var stage = $('#template-to-place-image-in');
        stage.css('display', 'block');

           $.ajax({
                // a bunch of ajax parameters that get the image with the requested id and then place it into the template
            });

        event.preventDefault();
        return false;
    };

}(jQuery));