如何绑定和解除绑定jquery中的事件：走马灯脚本修改

Question

我有一个jQuery Carousel脚本，我想稍微修改一下它的行为。以下是jsfiddle中的脚本和测试用例：http://jsfiddle.net/A4vHf/1/。以下是JS代码。

(function($) {

    $.fn.easyPaginate = function(options){

        var defaults = {                
            step: 4,
            delay: 100,
            numeric: true,
            nextprev: true,
            auto:false,
            pause:4000,
            clickstop:true,
            controls: 'pagination',
            current: 'current' 
        }; 

        var options = $.extend(defaults, options); 
        var step = options.step;
        var lower, upper;
        var children = $(this).children();
        var count = children.length;
        var obj, next, prev;        
        var page = 1;
        var timeout;
        var clicked = false;

        function show(){
            clearTimeout(timeout);
            lower = ((page-1) * step);
            upper = lower+step;
            $(children).each(function(i){
                var child = $(this);
                child.hide();
                if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
                if(options.nextprev){
                    if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
                    if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
                };
            }); 
            $('li','#'+ options.controls).removeClass(options.current);
            $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);

            if(options.auto){
                if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
            };
        };

        function auto(){
            if(upper <= count){ page++; show(); }           
        };

        this.each(function(){ 

            obj = this;

            if(count>step){

                var pages = Math.floor(count/step);
                if((count/step) > pages) pages++;

                var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj);

                if(options.nextprev){
                    prev = $('<li class="prev">Previous</li>')
                        .hide()
                        .appendTo(ol)
                        .click(function(){
                            clicked = true;
                            page--;
                            show();
                        });
                };

                if(options.numeric){
                    for(var i=1;i<=pages;i++){
                    $('<li data-index="'+ i +'">'+ i +'</li>')
                        .appendTo(ol)
                        .click(function(){  
                            clicked = true;
                            page = $(this).attr('data-index');
                            show();
                        });                 
                    };              
                };

                if(options.nextprev){
                    next = $('<li class="next">Next</li>')
                        .hide()
                        .appendTo(ol)
                        .click(function(){
                            clicked = true;         
                            page++;
                            show();
                        });
                };

                show();
            };
        }); 

    };  

})(jQuery);

我的目标是始终使class="prev"和class="next"按钮可见。我从代码中删除了hide();方法，但我还需要删除点击事件处理程序，否则即使我在最后或第一页，我仍然可以单击按钮，这会让事情变得混乱。我必须绑定和解除绑定点击事件，但不知道如何正确地执行。因此，这是我修改后的版本：

(function($) {

$.fn.easyPaginate = function(options){

    var defaults = {                
        step: 4,
        delay: 100,
        numeric: true,
        nextprev: true,
        auto:false,
        pause:4000,
        clickstop:true,
        controls: 'pagination',
        current: 'current' 
    }; 

    var options = $.extend(defaults, options); 
    var step = options.step;
    var lower, upper;
    var children = $(this).children();
    var count = children.length;
    var obj, next, prev;        
    var page = 1;
    var timeout;
    var clicked = false;

    function show(){
        clearTimeout(timeout);
        lower = ((page-1) * step);
        upper = lower+step;
        $(children).each(function(i){
            var child = $(this);
            child.hide();
            if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
            if(options.nextprev){
                if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
                if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
            };
        }); 
        $('li','#'+ options.controls).removeClass(options.current);
        $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);

        if(options.auto){
            if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
        };
    };

    function auto(){
        if(upper <= count){ page++; show(); }           
    };

    this.each(function(){ 

        obj = this;

        if(count>step){

            var pages = Math.floor(count/step);
            if((count/step) > pages) pages++;

            var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj);

            if(options.nextprev){
                prev = $('<li class="prev">Previous</li>')
                    .appendTo(ol)
                    .bind('click', function() {
                        clicked = true;
                        page--;
                        show();
                    });
            };

            if(options.numeric){
                for(var i=1;i<=pages;i++){
                $('<li data-index="'+ i +'">'+ i +'</li>')
                    .appendTo(ol)
                    .click(function(){  
                        clicked = true;
                        page = $(this).attr('data-index');
                        show();
                    });                 
                };              
            };

            if(options.nextprev){
                next = $('<li class="next">Next</li>')
                    .appendTo(ol)
                    .bind('click', function() {
                        clicked = true;         
                        page++;
                        show();
                    });
            };

            show();
        };
    }); 

};  

})(jQuery);

- George Katsanos

Answer 1

那么，只需在事件处理程序内检查用户是否到达了页面的边界，怎么样？

        if(options.nextprev){
            prev = $('<li class="prev">Previous</li>')
                .appendTo(ol)
                .bind('click', function() {

                    //check to see if there are any more pages in the negative direction
                    if (page > 0) {
                        clicked = true;
                        page--;
                        show();
                    }
                });
        }

        if(options.nextprev){
            next = $('<li class="next">Next</li>')
                .appendTo(ol)
                .bind('click', function() {

                    //check to see if there are any pages in the positive direction
                    if ((page + 1) < count) {
                        clicked = true;         
                        page++;
                        show();
                    }
                });
        }

更新

如果您希望上一个和下一个按钮永远不消失，则需要删除 show() 函数中淡入淡出元素的代码。该部分代码如下：

        if(options.nextprev){
            if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
            if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
        };

一个简单的解决方法就是注释掉这一部分，这里有一个示例：http://jsfiddle.net/A4vHf/18/。

- Jasper

---

抱歉，nop，不起作用。http://jsfiddle.net/A4vHf/3/ 按钮仍然消失了（不知道为什么！） - George Katsanos

@GeorgeKatsanos 你需要删除任何改变上一个和下一个按钮显示的代码。我已经在我的答案中进行了更新，这是更改后的链接：http://jsfiddle.net/A4vHf/18/ - Jasper

如果您在第一页时单击“上一页”，或者在最后一页时单击“下一页”，所有的<li>都会被设置为display:none;。是否可能将if移动到单击事件绑定之前？或者当我们到达页面末尾时完全解除绑定事件？ - George Katsanos

我实际上添加了一个警告（pages）; 看起来页面始终为7.. http://jsfiddle.net/A4vHf/22/ - George Katsanos

http://jsfiddle.net/A4vHf/24/。在上一页按钮的事件处理程序中，if语句需要检查page>1而不是page>0，因为您不是从第0页开始，而是从第1页开始。在下一页按钮的事件处理程序中，if语句需要检查当前页面是否小于总页面的一半，因为您同时显示两个页面。请参见我在此评论中发布的更新后的JSFiddle。 - Jasper