Jquery插件使用第二个实例的选项
我编写了一个Jquery Pagination插件，只需插件的一个实例即可。 当我尝试使用两个实例时，第一个实例忽略其给定的选项并使用第二个实例的选项。 我知道这一点，因为这两个部分都以每页定义的项目开始，但是当您在分页中导航到另一个“页面”时，它将恢复为第二个实例的itemsPerPage – 2 。
我的猜测是第二次调用这个插件时，它会覆盖$.pagination的选项，因此当任何一个分页进入新页面时，它会使用覆盖的选项。
这是插件：
/* Jquery Pagination */ (function($){ $.pagination = { defaultOptions : { itemsPerPage : 5, startPage : 1, showNextPrev : true, navigationPosition : 'before', paginationClass : 'pagination', paginationItemClass : 'paginationItem', paginationItemActiveClass : 'active', nextClass : 'next', nextText : 'Next', prevClass : 'prev', prevText : 'Prev', } } $.fn.extend({ pagination : function(newOptions){ var options = $.extend($.pagination.defaultOptions, newOptions), itemsToPaginate = $(this), itemsToPaginateContainer = itemsToPaginate.eq(0).parent(), paginationWrapper = "", paginationControls = '', pagination, numberOfPages, showPage = function(goToPage){ var page = (typeof goToPage === 'number') ? goToPage : goToPage.attr('href').replace('#page', ''), itemRangeEnd = page * options.itemsPerPage itemRangeStart = itemRangeEnd - options.itemsPerPage; $( '.' + options.paginationItemClass, pagination).removeClass(options.paginationItemActiveClass); if (typeof goToPage === 'number') pagination.find('.' + options.paginationItemClass).eq(goToPage-1).addClass(options.paginationItemActiveClass); else goToPage.addClass(options.paginationItemActiveClass); itemsToPaginate.hide().slice(itemRangeStart, itemRangeEnd).show(); }, createPagination = (function(){ // Add pagination element to DOM switch(options.navigationPosition.toLowerCase()){ /* // TODO: Create ability to insert pagination after or before & after case 'both': itemsToPaginateContainer.before(paginationWrapper); itemsToPaginateContainer.after(paginationWrapper); break; case 'after': itemsToPaginateContainer.after(paginationWrapper); break; */ default: itemsToPaginateContainer.before(paginationWrapper); break; } // Selecting pagination element pagination = itemsToPaginateContainer.siblings('.' + options.paginationClass); // Count how many pages to make numberOfPages = Math.ceil( itemsToPaginate.length / options.itemsPerPage ); // Insert controls into pagination element if(options.showNextPrev) paginationControls += "" + options.prevText + ""; for (var i = 1; i <= numberOfPages; i++) { paginationControls += "" + i + ""; } if(options.showNextPrev) paginationControls += "" + options.nextText + ""; (numberOfPages !== 1) ? pagination.html(paginationControls) : pagination.remove() ; }()), bindUIEvents = (function(){ pagination.find('.' + options.paginationItemClass + ':not(.' + options.nextClass + '):not(.' + options.prevClass + ')').on('click', function(e){ e.preventDefault(); showPage( $(this) ); }); pagination.find('.' + options.prevClass).on('click', function(){ var prevPageIdx = pagination.find('.' + options.paginationItemActiveClass).index() - 1; // console.log(prevPageIdx); if(prevPageIdx numberOfPages) showPage(1); else showPage(nextPageIdx); }); }()); showPage(options.startPage); return this; } }); })(jQuery);
的jsfiddle
知道为什么这个插件的每个实例都不只是使用自己的选项吗？ 我如何构建一个插件来封装和保护自己的选项？ 谢谢！
更改
var options = $.extend($.pagination.defaultOptions, newOptions),
至
var options = $.extend({}, $.pagination.defaultOptions, newOptions),
演示
原因是您在使用语法jQuery.extend（target [，object1] [，objectN]时将目标提供为defaultOption