如何在同一页面上创建此jquery插件的多个实例？

Question

请在同一页面上制作此jquery插件的多个实例时遇到问题。问题是第一个工作正常但其他人不在我的代码：

 (function($){
    $.fn.easyPaginate = function (options) { 
    var defaults = {
        paginateElement: 'li',
        hashPage: 'page',
        elementsPerPage: 10,
        effect: 'default',
        slideOffset: 200,
        firstButton: true,
        firstButtonText: '<<',
        lastButton: true,
        lastButtonText: '>>',        
        prevButton: true,
        prevButtonText: '<',        
        nextButton: true,
        nextButtonText: '>'
    }    
    return this.each (function (instance) {    
        var plugin = Object;
        plugin.el = $(this);
        plugin.el.addClass('easyPaginateList');
        plugin.settings = {
            pages: 0,
            objElements: Object,
            currentPage: 1
        }
        var getNbOfPages = function() {
            return Math.ceil(plugin.settings.objElements.length / 
        plugin.settings.elementsPerPage);         
        };
        var displayNav = function() {
            htmlNav = '<div class="easyPaginateNav">';
            if(plugin.settings.firstButton) {
                htmlNav += '<a href="#'+plugin.settings.hashPage+':1" title="First page" rel="1" class="first">'+plugin.settings.firstButtonText+'</a>';
            }
            if(plugin.settings.prevButton) {
                htmlNav += '<a href="" title="Previous" rel="" class="prev">'+plugin.settings.prevButtonText+'</a>';
            }
            for(i = 1;i <= plugin.settings.pages;i++) {
                htmlNav += '<a href="#'+plugin.settings.hashPage+':'+i+'" title="Page '+i+'" rel="'+i+'" class="page">'+i+'</a>';
            };
            if(plugin.settings.nextButton) {
                htmlNav += '<a href="" title="Next" rel="" class="next">'+plugin.settings.nextButtonText+'</a>';
            }
            if(plugin.settings.lastButton) {
                htmlNav += '<a href="#'+plugin.settings.hashPage+':'+plugin.settings.pages+'" title="Last page" rel="'+plugin.settings.pages+'" class="last">'+plugin.settings.lastButtonText+'</a>';
            }

            htmlNav += '</div>';
            plugin.nav = $(htmlNav);
            plugin.nav.css({
                'width': plugin.el.width()
            });
            plugin.el.after(plugin.nav);

            $('.easyPaginateNav a.page, .easyPaginateNav a.first, .easyPaginateNav a.last', plugin).on('click', function(e) {                
                e.preventDefault();
                displayPage($(this).attr('rel'));                
            });
            $('.easyPaginateNav a.prev', plugin).on('click', function(e) {                
                e.preventDefault();
                page = plugin.settings.currentPage > 1?parseInt(plugin.settings.currentPage) - 1:1;
                displayPage(page);
            });

            $('.easyPaginateNav a.next', plugin).on('click', function(e) {                
                e.preventDefault();
                page = plugin.settings.currentPage < plugin.settings.pages?parseInt(plugin.settings.currentPage) + 1:plugin.settings.pages;
                displayPage(page);
            });
        };
        var displayPage = function(page, forceEffect) {
            if(plugin.settings.currentPage != page) {
                plugin.settings.currentPage = parseInt(page);
                offsetStart = (page - 1) * plugin.settings.elementsPerPage;
                offsetEnd = page * plugin.settings.elementsPerPage;
                if(typeof(forceEffect) != 'undefined') {
                    eval("transition_"+forceEffect+"("+offsetStart+", "+offsetEnd+")");
                }else {
                    eval("transition_"+plugin.settings.effect+"("+offsetStart+", "+offsetEnd+")");
                }

                plugin.nav.find('.current').removeClass('current');
                plugin.nav.find('a.page:eq('+(page - 1)+')').addClass('current');

                switch(plugin.settings.currentPage) {
                    case 1:
                        $('.easyPaginateNav a', plugin).removeClass('disabled');
                        $('.easyPaginateNav a.first, .easyPaginateNav a.prev', plugin).addClass('disabled');
                        break;
                    case plugin.settings.pages:
                        $('.easyPaginateNav a', plugin).removeClass('disabled');
                        $('.easyPaginateNav a.last, .easyPaginateNav a.next', plugin).addClass('disabled');
                        break;
                    default:
                        $('.easyPaginateNav a', plugin).removeClass('disabled');
                        break;
                }
            }
        };
        var transition_default = function(offsetStart, offsetEnd) {
            plugin.currentElements.hide();
            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
            plugin.el.html(plugin.currentElements);
            plugin.currentElements.show();
        };

        var transition_fade = function(offsetStart, offsetEnd) {
            plugin.currentElements.fadeOut();
            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
            plugin.el.html(plugin.currentElements);
            plugin.currentElements.fadeIn();
        };

        var transition_slide = function(offsetStart, offsetEnd) {
            plugin.currentElements.animate({
                'margin-left': plugin.settings.slideOffset * -1,
                'opacity': 0
            }, function() {
                $(this).remove();
            });

            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
            plugin.currentElements.css({
                'margin-left': plugin.settings.slideOffset,
                'display': 'block',
                'opacity': 0,
                'min-width': plugin.el.width() / 2
            });
            plugin.el.html(plugin.currentElements);
            plugin.currentElements.animate({
                'margin-left': 0,
                'opacity': 1
            });
        };

        var transition_climb = function(offsetStart, offsetEnd) {            
            plugin.currentElements.each(function(i) {
                var $objThis = $(this);
                setTimeout(function() {
                    $objThis.animate({
                        'margin-left': plugin.settings.slideOffset * -1,
                        'opacity': 0
                    }, function() {
                        $(this).remove();
                    });
                }, i * 200);
            });

            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
            plugin.currentElements.css({
                'margin-left': plugin.settings.slideOffset,
                'display': 'block',
                'opacity': 0,
                'min-width': plugin.el.width() / 2
            });
            plugin.el.html(plugin.currentElements);
            plugin.currentElements.each(function(i) {
                var $objThis = $(this);
                setTimeout(function() {
                    $objThis.animate({
                        'margin-left': 0,
                        'opacity': 1
                    });
                }, i * 200);
            });
        };

        plugin.settings = $.extend({}, defaults, options);

        plugin.currentElements = $([]);
        plugin.settings.objElements = plugin.el.find(plugin.settings.paginateElement);
        plugin.settings.pages = getNbOfPages();
        if(plugin.settings.pages > 1) {
            plugin.el.html();

            // Here we go
            displayNav();

            page = 1;
            if(document.location.hash.indexOf('#'+plugin.settings.hashPage+':') != -1) {
                page = parseInt(document.location.hash.replace('#'+plugin.settings.hashPage+':', ''));
                if(page.length <= 0 || page < 1 || page > plugin.settings.pages) {
                    page = 1;
                }
            }

            displayPage(page, 'default');
        }
    });
    };
    })(jQuery);

如果有人可以帮助我

谢谢！

Answer 1

不要选择元素

$('.easyPaginateNav a.next')

但使用插件元素：

plugin.el.find('easyPaginateNav a.next'`)

在这个示例行中你做得很好：

plugin.nav.find('.current').removeClass('current');

这样你总会在当前插件实例中选择元素。

修改

改变了很多东西，甚至不确定导致主要问题的原因（plugin.settings.objElements是不正确的）。请检查以下代码：

＆＃13;

＆＃13;

$.fn.easyPaginate = function(options) {
    var defaults = {
        paginateElement: 'li',
        hashPage: 'page',
        elementsPerPage: 10,
        effect: 'default',
        slideOffset: 200,
        firstButton: true,
        firstButtonText: '<<',
        lastButton: true,
        lastButtonText: '>>',
        prevButton: true,
        prevButtonText: '<',
        nextButton: true,
        nextButtonText: '>'
    }
    return this.each(function(instance) {
        var plugin = {
        	nav: null,
        	el: $(this),
        	settings: {
                pages: 0,
                objElements: null,
                currentPage: 1
            }
        };
        plugin.settings = $.extend({}, defaults, options);
        plugin.settings.objElements = plugin.el.find(plugin.settings.paginateElement);
        plugin.el.addClass('easyPaginateList');
        var getNbOfPages = function() {
            return Math.ceil(plugin.settings.objElements.length / plugin.settings.elementsPerPage);
        };
        var displayNav = function() {
            htmlNav = '<div class="easyPaginateNav">';
            if (plugin.settings.firstButton) {
                htmlNav += '<a href="#' + plugin.settings.hashPage + ':1" title="First page" rel="1" class="first">' + plugin.settings.firstButtonText + '</a>';
            }
            if (plugin.settings.prevButton) {
                htmlNav += '<a href="" title="Previous" rel="" class="prev">' + plugin.settings.prevButtonText + '</a>';
            }
            for (i = 1; i <= plugin.settings.pages; i++) {
                htmlNav += '<a href="#' + plugin.settings.hashPage + ':' + i + '" title="Page ' + i + '" rel="' + i + '" class="page">' + i + '</a>';
            };
            if (plugin.settings.nextButton) {
                htmlNav += '<a href="" title="Next" rel="" class="next">' + plugin.settings.nextButtonText + '</a>';
            }
            if (plugin.settings.lastButton) {
                htmlNav += '<a href="#' + plugin.settings.hashPage + ':' + plugin.settings.pages + '" title="Last page" rel="' + plugin.settings.pages + '" class="last">' + plugin.settings.lastButtonText + '</a>';
            }
            htmlNav += '</div>';
            plugin.nav = $(htmlNav);
            plugin.nav.css({
                'width': plugin.el.width()
            });
            
            plugin.el.after(plugin.nav);
            
            plugin.nav.find('a.page, a.first, a.last').on('click', function(e) {
                e.preventDefault();
                displayPage($(this).attr('rel'));
            });

            plugin.nav.find('a.prev').on('click', function(e) {
                e.preventDefault();
                page = plugin.settings.currentPage > 1 ? parseInt(plugin.settings.currentPage) - 1 : 1;
                displayPage(page);
            });

            plugin.nav.find('a.next').on('click', function(e) {
                e.preventDefault();
                page = plugin.settings.currentPage < plugin.settings.pages ? parseInt(plugin.settings.currentPage) + 1 : plugin.settings.pages;
                displayPage(page);
            });
        };

        var displayPage = function(page, forceEffect) {
            if (plugin.settings.currentPage != page) {
                plugin.settings.currentPage = parseInt(page);
                offsetStart = (page - 1) * plugin.settings.elementsPerPage;
                offsetEnd = page * plugin.settings.elementsPerPage;
                if (typeof(forceEffect) != 'undefined') {
                    eval("transition_" + forceEffect + "(" + offsetStart + ", " + offsetEnd + ")");
                } else {
                    eval("transition_" + plugin.settings.effect + "(" + offsetStart + ", " + offsetEnd + ")");
                }

                plugin.nav.find('.current').removeClass('current');
                plugin.nav.find('a.page:eq(' + (page - 1) + ')').addClass('current');

                switch (plugin.settings.currentPage) {
                    case 1:
                        plugin.nav.find('a').removeClass('disabled');
                        plugin.nav.find('a.first, a.prev').addClass('disabled');
                        break;
                    case plugin.settings.pages:
                        plugin.nav.find('a').removeClass('disabled');
                        plugin.nav.find('a.last, a.next').addClass('disabled');
                        break;
                    default:
                        plugin.nav.find('a').removeClass('disabled');
                        break;
                }
            }
        };

        var transition_default = function(offsetStart, offsetEnd) {
            plugin.currentElements.hide();
            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
            plugin.el.html(plugin.currentElements);
            plugin.currentElements.show();
        };

        var transition_fade = function(offsetStart, offsetEnd) {
            plugin.currentElements.fadeOut();
            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
            plugin.el.html(plugin.currentElements);
            plugin.currentElements.fadeIn();
        };

        var transition_slide = function(offsetStart, offsetEnd) {
            plugin.currentElements.animate({
                'margin-left': plugin.settings.slideOffset * -1,
                'opacity': 0
            }, function() {
                $(this).remove();
            });

            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
            plugin.currentElements.css({
                'margin-left': plugin.settings.slideOffset,
                'display': 'block',
                'opacity': 0,
                'min-width': plugin.el.width() / 2
            });
            plugin.el.html(plugin.currentElements);
            plugin.currentElements.animate({
                'margin-left': 0,
                'opacity': 1
            });
        };

        var transition_climb = function(offsetStart, offsetEnd) {
            plugin.currentElements.each(function(i) {
                var $objThis = $(this);
                setTimeout(function() {
                    $objThis.animate({
                        'margin-left': plugin.settings.slideOffset * -1,
                        'opacity': 0
                    }, function() {
                        $(this).remove();
                    });
                }, i * 200);
            });

            plugin.currentElements = plugin.settings.objElements.slice(offsetStart, offsetEnd).clone();
            plugin.currentElements.css({
                'margin-left': plugin.settings.slideOffset,
                'display': 'block',
                'opacity': 0,
                'min-width': plugin.el.width() / 2
            });
            plugin.el.html(plugin.currentElements);
            plugin.currentElements.each(function(i) {
                var $objThis = $(this);
                setTimeout(function() {
                    $objThis.animate({
                        'margin-left': 0,
                        'opacity': 1
                    });
                }, i * 200);
            });
        };

        plugin.currentElements = $([]);
        plugin.settings.pages = getNbOfPages();
        if (plugin.settings.pages > 1) {
            plugin.el.html();
            // Here we go
            displayNav();
            page = 1;
            if (document.location.hash.indexOf('#' + plugin.settings.hashPage + ':') != -1) {
                page = parseInt(document.location.hash.replace('#' + plugin.settings.hashPage + ':', ''));
                if (page.length <= 0 || page < 1 || page > plugin.settings.pages) {
                    page = 1;
                }
            }
            displayPage(page, 'default');
        }
    });
};

$('ul').easyPaginate({
	elementsPerPage: 2
})

＆＃13;

body {
    font-family: sans-serif;
}
.easyPaginateNav a {
    display: inline-block;
    margin: 0 5px;
    padding: 2px;
    text-align: center;
    width: 20px;
    border: 1px solid #ccc;
    text-decoration: none;
}
.easyPaginateNav a.disabled {
    opacity: .3;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>List 1, element 1</li>
    <li>List 1, element 2</li>
    <li>List 1, element 3</li>
    <li>List 1, element 4</li>
    <li>List 1, element 5</li>
</ul>
<ul>
    <li>List 2, element 1</li>
    <li>List 2, element 2</li>
    <li>List 2, element 3</li>
    <li>List 2, element 4</li>
    <li>List 2, element 5</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

同样在this Fiddle。