Javascript 一个常用函数的jquery原型

除了标准api功能外，我对JQuery没有太多经验，但我的页面上有许多滚动条，它们都使用相同的代码，只是每个滚动条都有一些自己的设置（例如，单独的高度和滚动限制，以及当前滚动的次数）。我希望能够一次又一次地使用代码，但是每个引用都会收到自己的变量集。我认为原型是我所追求的，但是我不能完全理解我所看到的例子。这是我的滚动代码：

$(document).ready(function() {
        var scrollAmt = 50; //distance in pixels;
        var scrollableAmt = $('#weblinks .container').outerHeight();
        var viewAmt = $('#weblinks').outerHeight();

        var maxScroll = Math.ceil((scrollableAmt-viewAmt) / scrollAmt);
        var currentItem = 0;

        function setScrollButtons(scrollRef,scrollAmount){

        }

        $("#weblinks .scrollDownBtn").click(function(){
            if (currentItem <= maxScroll){


                $('#weblinks .container:not(:animated)').animate({'top' : '-='+ scrollAmt + ''},500,function(){
                    currentItem++
                });

            } else {
                currentItem = 0;
                $('#weblinks .container:not(:animated)').animate({'top' : currentItem},500);
            }
        });
        $("#weblinks .scrollUpBtn").click(function(){
            if (currentItem > 0){

                $('#weblinks .container:not(:animated)').animate({'top' : '+='+ scrollAmt + ''},500,function(){
                    currentItem--;
                });

            } else {
                $('#weblinks .container:not(:animated)').animate({'top' : currentItem},500);
            }
        });
    });

$（文档）.ready（函数（）{
var scrollmat=50；//以像素为单位的距离；
var scrollableAmt=$（'#weblinks.container'）.outerHeight（）；
var viewmat=$（'#weblinks'）.outerHeight（）；
var maxScroll=Math.ceil（（scrollableAmt-viewAmt）/scrollAmt）；
var currentItem=0；
功能设置滚动按钮（scrollRef、scrollAmount）{
}
$（“#weblinks.scrollDownBtn”）。单击（函数（）{
如果（当前项目0）{
$（#weblinks.container:not（：animated））.animate（{'top'：'+='+scrollAmt++'}，500，function（）{
当前项目--；
});
}否则{
$（#weblinks.container:not（：animated））.animate（{'top'：currentItem}，500）；
}
});
});

所以本质上我想要做的是创建一个函数或类，我猜，它完成了上面所有的代码，但是能够传递一个div引用来代替#weblinks，或者传递一个滚动量，并且这个功能的多个实例能够同时存在于同一个页面上。有人对最好的方法有什么建议吗

编辑：我已经为每个滚动条添加了始终存在的HTML

<div id="weblinks" class="scrollbar_container">
        <div class="customScrollBox">
            <div class="container">
                <div class="content">

                </div>
            </div>

            <a class="scrollUpBtn" href="javascript:void(0);"></a> <a class="scrollDownBtn" href="javascript:void(0);"></a>         
        </div>
    </div>

---

在所有div都有子容器类的情况下，您可以非常简单地重构它。比如：

function scrollExample(divId) {
    var scrollAmt = 50; //distance in pixels;
    var scrollableAmt = $(divId + ' .container').outerHeight();
    var viewAmt = $(divId).outerHeight();

    var maxScroll = Math.ceil((scrollableAmt-viewAmt) / scrollAmt);
    var currentItem = 0;

    function setScrollButtons(scrollRef,scrollAmount){

    }

    $(divId + " .scrollDownBtn").click(function(){
        if (currentItem <= maxScroll){


            $(divId + ' .container:not(:animated)').animate({'top' : '-='+ scrollAmt + ''},500,function(){
                currentItem++
            });

        } else {
            currentItem = 0;
            $(divId + ' .container:not(:animated)').animate({'top' : currentItem},500);
        }
    });
    $(divId + " .scrollUpBtn").click(function(){
        if (currentItem > 0){

            $(divId + ' .container:not(:animated)').animate({'top' : '+='+ scrollAmt + ''},500,function(){
                currentItem--;
            });

        } else {
            $(divId + ' .container:not(:animated)').animate({'top' : currentItem},500);
        }
    });
});

$(document).ready(function() {
    scrollExample('#webLinks');
}

---

如果您有对对象的实际引用，它将略有不同，但仍然遵循类似的原则。

如果所有div都有子容器类，您可以非常简单地重构它。比如：

function scrollExample(divId) {
    var scrollAmt = 50; //distance in pixels;
    var scrollableAmt = $(divId + ' .container').outerHeight();
    var viewAmt = $(divId).outerHeight();

    var maxScroll = Math.ceil((scrollableAmt-viewAmt) / scrollAmt);
    var currentItem = 0;

    function setScrollButtons(scrollRef,scrollAmount){

    }

    $(divId + " .scrollDownBtn").click(function(){
        if (currentItem <= maxScroll){


            $(divId + ' .container:not(:animated)').animate({'top' : '-='+ scrollAmt + ''},500,function(){
                currentItem++
            });

        } else {
            currentItem = 0;
            $(divId + ' .container:not(:animated)').animate({'top' : currentItem},500);
        }
    });
    $(divId + " .scrollUpBtn").click(function(){
        if (currentItem > 0){

            $(divId + ' .container:not(:animated)').animate({'top' : '+='+ scrollAmt + ''},500,function(){
                currentItem--;
            });

        } else {
            $(divId + ' .container:not(:animated)').animate({'top' : currentItem},500);
        }
    });
});

$(document).ready(function() {
    scrollExample('#webLinks');
}

---

如果您对该对象有实际引用，则会略有不同，但仍然遵循类似的原则。

这是您可以为自己创建的jQuery插件的一个很好的候选。当然，如果你想花点时间学习这个原则：）

---

关于jQuery插件做什么和如何做的一些细节，这是一个很好的候选jQuery插件，您可以自己创建。当然，如果你想花点时间学习这个原则：）

有关jQuery插件的功能和方式的详细信息，请参见我的出价：

(function($){
    $.fn.extend({
        customScroller: function(options){
            return this.each(function(i,e){
                var container = $(e).find('.container'),
                    content = $(e).find('.content'),
                    scrollUpBtn = $(e).find('.scrollUpBtn'),
                    scrollDownBtn = $(e).find('.scrollDownBtn');

                var self = $(e);
                var o = $.extend({}, $.fn.customScroller.defaults, options);

                o.scrollableAmt = container.outerHeight();
                o.viewAmt = self.outerHeight();
                o.maxScroll = Math.ceil((o.scrollableAmt - o.viewAmt) / o.scrollAmt);

                scrollDownBtn.click(function(){
                    console.log('DOWN -- current: '+o.currentItem);
                    if (o.currentItem <= o.maxScroll){
                        container.filter(':not(:animated)').animate({
                            top: '-='+o.scrollAmt
                        },500,function(){
                            o.currentItem++;
                        });
                    }else{
                        o.currentItem = 0;
                        container.filter(':not(:animated)').animate({
                            top: o.currentItem
                        },500);
                    }
                });
                scrollUpBtn.click(function(){
                    console.log('UP -- current: '+o.currentItem);
                    if (o.currentItem > 0){
                        container.filter(':not(:animated)').animate({
                            top: '+='+o.scrollAmt
                        },500,function(){
                            o.currentItem--;
                        });
                    }else{
                        container.filter(':not(:animated)').animate({
                            top: o.currentItem
                        },500);
                    }
                });
            });
        }
    });

    $.fn.customScroller.defaults = {
        scrollAmt: 50,
        scrollableAmt: 0,
        viewAmt: 0,
        maxScroll: 0,
        currentItem: 0
    };
})(jQuery);

$('#weblinks').customScroller();

（函数（$）{
$.fn.extend({
customScroller:功能（选项）{
返回此。每个（函数（i，e）{
var container=$（e）.find（'.container'），
content=$（e）.find（'.content'），
scrollUpBtn=$（e）.find（'.scrollUpBtn'），
scrollDownBtn=$（e）.find（'.scrollDownBtn'）；
var-self=$（e）；
var o=$.extend（{}，$.fn.customScroller.defaults，options）；
o、 scrollableAmt=container.outerHeight（）；
o、 viewmat=self.outerHeight（）；
o、 maxScroll=Math.ceil（（o.scrollableAmt-o.viewAmt）/o.scrollAmt）；
scrollDownBtn.单击（函数（）{
log（'DOWN--current:'+o.currentItem）；
如果（o.currentItem 0）{
容器。过滤器（':not（：animated'）。设置动画({
顶部：'+='+o
}，500，函数（）{
o、 当前项目--；
});
}否则{
容器。过滤器（':not（：animated'）。设置动画({
顶部：o.currentItem
},500);
}
});
});
}
});
$.fn.customScroller.defaults={
总金额：50，
scrollableAmt:0，
viewAmt:0，
maxScroll:0，
当前项目：0
};
})（jQuery）；
$（'#weblinks'）。customScroller（）；

为了回答您的问题，我在几个地方使用extend：一个用于选项，另一个用于jQuery插件功能

• $.fn.extend

  告诉jQuery这是在扩展其功能

• $.extend（{}，$.fn.customScroller.defaults，选项）

  允许您调用

  .customScroller（{scrollmount:10}）

  并更改滚动的行为

任何其他问题，请提问。

我的出价：

(function($){
    $.fn.extend({
        customScroller: function(options){
            return this.each(function(i,e){
                var container = $(e).find('.container'),
                    content = $(e).find('.content'),
                    scrollUpBtn = $(e).find('.scrollUpBtn'),
                    scrollDownBtn = $(e).find('.scrollDownBtn');

                var self = $(e);
                var o = $.extend({}, $.fn.customScroller.defaults, options);

                o.scrollableAmt = container.outerHeight();
                o.viewAmt = self.outerHeight();
                o.maxScroll = Math.ceil((o.scrollableAmt - o.viewAmt) / o.scrollAmt);

                scrollDownBtn.click(function(){
                    console.log('DOWN -- current: '+o.currentItem);
                    if (o.currentItem <= o.maxScroll){
                        container.filter(':not(:animated)').animate({
                            top: '-='+o.scrollAmt
                        },500,function(){
                            o.currentItem++;
                        });
                    }else{
                        o.currentItem = 0;
                        container.filter(':not(:animated)').animate({
                            top: o.currentItem
                        },500);
                    }
                });
                scrollUpBtn.click(function(){
                    console.log('UP -- current: '+o.currentItem);
                    if (o.currentItem > 0){
                        container.filter(':not(:animated)').animate({
                            top: '+='+o.scrollAmt
                        },500,function(){
                            o.currentItem--;
                        });
                    }else{
                        container.filter(':not(:animated)').animate({
                            top: o.currentItem
                        },500);
                    }
                });
            });
        }
    });

    $.fn.customScroller.defaults = {
        scrollAmt: 50,
        scrollableAmt: 0,
        viewAmt: 0,
        maxScroll: 0,
        currentItem: 0
    };
})(jQuery);

$('#weblinks').customScroller();

（函数（$）{
$.fn.extend({
customScroller:功能（选项）{
返回此。每个（函数（i，e）{
var container=$（e）.find（'.container'），
content=$（e）.find（'.content'），
scrollUpBtn=$（e）.find（'.scrollUpBtn'），
scrollDownBtn=$（e）.find（'.scrollDownBtn'）；
var-self=$（e）；
var o=$.extend（{}，$.fn.customScroller.defaults，options）；
o、 scrollableAmt=container.outerHeight（）；
o、 viewmat=self.outerHeight（）；
o、 maxScroll=Math.ceil（（o.scrollableAmt-o.viewAmt）/o.scrollAmt）；
scrollDownBtn.单击（函数（）{
log（'DOWN--current:'+o.currentItem）；
如果（o.currentItem 0）{
容器。过滤器（':not（：animated'）。设置动画({
顶部：'+='+o
}，500，函数（）{
o、 当前项目--；
});
}否则{
container.filter（'：not（：anima）