gpt4 book ai didi

javascript - 使用第二个实例的选项的 Jquery 插件

转载 作者:行者123 更新时间:2023-11-28 01:47:30 24 4
gpt4 key购买 nike

我编写了一个 Jquery 分页插件,只需使用该插件的一个实例就可以很好地工作。当我尝试使用两个实例时,第一个实例会忽略其给定的选项并使用第二个实例的选项。我知道这一点是因为这两个部分都以每页定义的项目开始,但是当您导航到分页中的另一个“页面”时,它会恢复到第二个实例的 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 = "<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),

<强> Demo

原因是您在使用语法 jQuery.extend( target [, object1 ] [, objectN ] 时将目标提供为 defaultOption

关于javascript - 使用第二个实例的选项的 Jquery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20110634/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com