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

アプローチを変更します。要素ごとにリスナーを定義する代わりに、リスナーを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 に答える