使用第二实例的选项的jQuery插件 [英] Jquery plugin using second instance's options

问题描述

我编写了一个Jquery分页插件，仅与该插件的一个实例配合使用即可.当我尝试使用两个实例时，第一个实例将忽略其给定的选项，而使用第二个实例的选项.我知道这是因为这两个部分都从每页定义的项目开始，但是当您导航到分页中的另一个页面"时，它会还原为第二个实例的itemsPerPage- 2 . /p>

我的猜测是第二次调用此插件，它会覆盖$.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 = "<div class='" + options.paginationClass + "'></div>",
                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 += "<a href='#' class='" + options.prevClass + "'>" + options.prevText + "</a>";
                for (var i = 1; i <= numberOfPages; i++) {
                    paginationControls += "<a href='#page" + i + "' class='" + options.paginationItemClass + "'>" + i + "</a>";
                }
                if(options.showNextPrev) paginationControls += "<a href='#' class='" + options.nextClass + "'>" + options.nextText + "</a>";
                (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 < 1)
                        showPage(numberOfPages);
                    else
                        showPage(prevPageIdx);
                });

                pagination.find('.' + options.nextClass).on('click', function(){
                    var nextPageIdx = pagination.find('.' + options.paginationItemActiveClass).index() + 1;
                    if(nextPageIdx > 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),

演示

原因是您正在使用语法

JSFiddle

Any idea why each instance of this plugin doesn't just use its own options? How would I need to structure a plugin to encapsulate and protect their own options? Thanks!

解决方案

Change

var options = $.extend($.pagination.defaultOptions, newOptions),

To

var options = $.extend({}, $.pagination.defaultOptions, newOptions),

Demo

Reason is you are providing the target as defaultOption while using the syntax jQuery.extend( target [, object1 ] [, objectN ]

这篇关于使用第二实例的选项的jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！