Question

我正在创建一个简单的jQuery插件，我正在尝试在shrink()函数中引用调用元素。我知道如果我没有传递元素，那么this将引用window但是有没有办法引用调用jQuery插件的元素？如果没有，那么我如何在this的回调中传递$(window).on('resize', shrink);？

$(function ($) {
    $.fn.shrinkIt = function (options) {
        var settings = $.extend({
            className: "shortened",
            maxWidth: 800
        }, options);

        var shrink = function (elem) {
            var $this = $(elem);
            var viewerWidth = $('.header').width();
            if (viewerWidth > 800) {
                $this.removeClass(settings.className);
            } else {
                $this.addClass(settings.className);
            }
            $this.css('visibility', 'visible');
        };

        return this.each(function () {
            shrink(this);
            $(window).on('resize', shrink); // how to get 'this' to shrink() function??
        });
    };

    $('.lessonDocumentType').shrinkIt();
})(jQuery);

Answer 1

将var $this = $(this);放在第一个函数（$.fn.shrinkIt）中。

该函数中的任何内部函数现在都可以引用$this。

Answer 2

改变你的方法。不是为每个元素定义一个监听器，而是一次附加监听器并管理所有元素：

$(function ($) {
    $.fn.shrinkIt = function (options) {
        var settings = $.extend({
            className: "shortened",
            maxWidth: 800
        }, options);

        var $els = $(this);
        $(window).on('resize', shrink);
        function shrink() {
            $els.each(function() {
                var $this = $(this);
                var viewerWidth = $('.header').width();
                if (viewerWidth > 800) {
                    $this.removeClass(settings.className);
                } else {
                    $this.addClass(settings.className);
                }
                $this.css('visibility', 'visible');
            });
        };
        return this;

    };

    $('.lessonDocumentType').shrinkIt();
})(jQuery);

如何在自定义插件中引用调用元素

2 个答案: