jQuery插件与此this.each分开 [英] jQuery Plugin breaks with this.each

问题描述

我正在编写一个插件，并试图将函数包装在每个方法中，但是它破坏了插件.如果块内容未包装在"this.each"插件中，则该插件有效.我知道为了传递多个选择器，我需要返回this.each"还是不返回"?我还想消除在插件内部使用选择器的需求，例如"#the_lead"，而不是使用"this".

I'm writing a plugin and trying to wrap the function inside of an each method but it breaks the plugin. If the block content is not wrapped within "this.each" plugin works. I understand that in order to pass multiple selectors I need to "return this.each" or not? I also want to eliminate the need to use the selector inside the plugin e.g "#the_lead", instead use "this".

(function($) {
    $.fn.scroll_lead = function (options) {
        var defaults = {
            speedup: 500
        };
        var options = $.extend({}, defaults, options);
        return this.each(function () {
            var $window_height = $(window).height();
            var $document_height = $(document).height();
            var $hide_lead;
            $(window).scroll(function () {
                var $scrollTop = $(window).scrollTop();
                if (!$hide_lead) {
                    if ($scrollTop > ($document_height / 2)) {
                        $("#the_lead").slideDown(options.speedup);
                    } else {
                        $("#the_lead").slideUp(500, function () {
                            $(this).hide();
                        });
                    }
                }
            });
            $('#hide_lead').click(function (e) {
                $(this).parent().parents('div').hide();
                hide_lead = true;
                e.preventDefault();
            });
        });
    };
})(jQuery);

推荐答案

少量内容；

在教程中说，

1. 将$(this)分配给$ this并在插件内部的任何函数中使用它， http://docs.jquery.com/Plugins/Authoring .

return this.each(function () {
    var window_height = $(window).height();
    var document_height = $(document).height();
    var hide_lead;
    $this = $(this);
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        if (!hide_lead) {
            if (scrollTop > (document_height / 2)) {
                $this.slideDown(options.speedup);
            } else {
                $this.slideUp(500, function () {
                    //$(this).hide();
                });
            }
        }
    });
    $this.click(function (e) {
        $(this).parent().parents('div').hide();
        hide_lead = true;
        e.preventDefault();
    });
});

尝试避免操纵插件内部的父对象，包括$(window)和$(document).

Try to avoid manipulation of parent objects inside your plugin, including $(window), and $(document).

可以读取窗口和文档的属性，但是如果在插件中对其进行了操作，则将根据选择器的次数对其进行操作.

It is ok to read properties of window and document, but if it is manipulated in your plugin, it will be maniuplated by number of times of your selector.

在您的代码中，由于您使用this.each，因此多次绑定了窗口的滚动功能.例如，$("div").scroll_lead()会将'scroll'方法绑定到与您的文档标签一样多的窗口. $(document)和插件目标的所有父元素也是如此.

In your code, because you use this.each, you are binding scroll function of window several times. For example, $("div").scroll_lead() will bind 'scroll' method to window as many as tags of your document. The same applies to $(document) and all parent elements of plugin target.

如果可能的话，这是您的意图，请使用元素滚动方法，而不是窗口滚动.

If possible and it is your intention, use element scroll method, not window scroll.

要获取滚动值$(el).scrollTop()

To get scroll value $(el).scrollTop()

要向下滚动，请输入$(el).scrollTop(NUMBER)

To scroll down, $(el).scrollTop(NUMBER)

要绑定onScroll方法，请使用$(el).scroll(functtion(){...})

To bind onScroll method, $(el).scroll( functtion() {...} )

希望有帮助

这篇关于jQuery插件与此this.each分开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！