0

我正在编写一个插件并尝试将函数包装在每个方法中，但它破坏了插件。如果块内容未包含在“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);
4

2 回答 2

0

首先，您的语法不正确。

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

试试$(this).each哪个会让你更接近。

请记住Jquery.Each不能迭代不是对象或数组的东西，因此请确保您尝试实现的目标是有意义的。

你想在这里达到什么目的？

于 2013-02-08T06:03:28.813 回答
0

一些事情;

  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();
    });
});

  2. 尽量避免在插件中操作父对象，包括 $(window) 和 $(document)。

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

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

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

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

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

    要绑定 onScroll 方法， $(el).scroll( function() {...} )

希望能帮助到你

于 2013-02-08T20:25:21.300 回答