0

我正在创建一个简单的 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);
4

2 回答 2

1

放入var $this = $(this);第一个函数 ( $.fn.shrinkIt)。

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

于 2012-11-30T20:17:04.070 回答
1

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

$(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);
于 2012-11-30T20:24:30.263 回答