Question

我正在编写一个插件并尝试将函数包装在每个方法中，但它会破坏插件。如果块内容未包含在“this.each”插件中，则可以使用。我明白为了传递多个选择器，我需要“返回this.each”或不？我还想消除在插件中使用选择器的需要，例如“#the_lead”，而不是使用“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);

Answer 1

首先，您的语法不正确。

each上不存在

this，因为这是函数的上下文，而不是jquery知道的元素。

尝试$(this).each，这会让你更接近。

请记住Jquery.Each无法对不是对象或数组的内容进行迭代，因此请确保您尝试实现的内容有意义。

你想在这里实现什么目标？

Answer 2

很少;

将$（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）。

可以读取窗口和文档的属性，但如果在插件中操作它，它将按选择器的次数进行操作。

在你的代码中，因为你使用this.each，你会多次绑定窗口的滚动功能。例如，$（“div”）。scroll_lead（）将'scroll'方法绑定到窗口，与文档的标签一样多。这同样适用于$（document）和插件目标的所有父元素。
如果可能且您的意图是，请使用元素滚动方法，而不是窗口滚动。

获取滚动值$（el）.scrollTop（）

向下滚动，$（el）.scrollTop（NUMBER）

要绑定onScroll方法，$（el）.scroll（functtion（）{...}）

希望有所帮助

jQuery插件打破了this.each

2 个答案: