[英]QuickPager Javascript works for one click, but not second click
Javascript noob here. Javascript noob在这里。
I've modified the plugin available online to update the menu to only show 10 entries -5/+5 of the current selected. 我已经修改了可在线使用的插件,以更新菜单,使其仅显示当前所选条目的10个条目-5 / + 5。 It actually works for the first click, then stops working past there (clicking on the a href's do nothing past the first one).
它实际上适用于第一次单击,然后停止在那里的工作(单击a href不会在第一次单击后执行任何操作)。
Could anyone help point me in the direction to where I screwed this up? 有人可以帮我指出我搞砸的地方吗?
I know this is a way to do pagination, maybe not best practice, but it's the easiest for the application I'm using and my knowledge of Javascript (none). 我知道这是一种进行分页的方法,也许不是最佳实践,但这对我正在使用的应用程序和我对Javascript的了解最为简单(无)。
/*-------------------------------------------------
Quick Pager jquery plugin
Copyright (C) 2011 by Dan Drayne
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
v1.1/ 18/09/09 * bug fix by John V - http://blog.geekyjohn.com/
-------------------------------------------------*/
(function($) {
$.fn.quickPager = function(options) {
var defaults = {
pageSize: 10,
currentPage: 1,
holder: null,
pagerLocation: "both"
};
var options = $.extend(defaults, options);
return this.each(function() {
var selector = $(this);
var pageCounter = 1;
selector.wrap("<div class='PaginationContainer'></div>");
selector.children().each(function(i){
if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
$(this).addClass("PaginationPage"+pageCounter);
}
else {
$(this).addClass("PaginationPage"+(pageCounter+1));
pageCounter ++;
}
});
// show/hide the appropriate regions
selector.children().hide();
selector.children(".PaginationPage"+options.currentPage).show();
if(pageCounter <= 1) {
return;
}
//Build pager navigation
var pageNav = "<ul class='pagination'>";
for (i=1;i<=pageCounter;i++){
if (i==options.currentPage) {
pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
else{
if(i<=10){
pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
}
}
pageNav += "</ul>";
if(!options.holder) {
switch(options.pagerLocation)
{
case "before":
selector.before(pageNav);
break;
case "both":
selector.before(pageNav);
selector.after(pageNav);
break;
default:
selector.after(pageNav);
}
}
else {
$(options.holder).append(pageNav);
}
//pager navigation behaviour
selector.parent().find(".pagination a").click(function() {
//grab the REL attribute
var clickedLink = $(this).attr("rel");
options.currentPage = clickedLink;
//Rebuild Pager Nav
$('.pagination').remove();
var pageNav = "<ul class='pagination'>";
for (i=parseInt(options.currentPage)-5;i<=pageCounter;i++){
if (i==options.currentPage) {
pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
else{
if(i<=parseInt(options.currentPage)+5){
pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
}
}
}
pageNav += "</ul>";
if(!options.holder) {
switch(options.pagerLocation)
{
case "before":
selector.before(pageNav);
break;
case "both":
selector.before(pageNav);
selector.after(pageNav);
break;
default:
selector.after(pageNav);
}
}
else {
$(options.holder).append(pageNav);
}
if(options.holder) {
$(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("active");
$(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("active");
}
else {
//remove current current (!) page
$(this).parent("li").parent("ul").parent(".PaginationContainer").find("li.active").removeClass("active");
//Add current page highlighting
$(this).parent("li").parent("ul").parent(".PaginationContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("active");
}
//hide and show relevant links
selector.children().hide();
selector.find(".PaginationPage"+clickedLink).show();
return false;
});
});
}
})(jQuery);
I answered this with changing .click
to on('click'
while referencing a static parent object. 我通过将
.click
更改为on('click'
来引用静态父对象,以此回答了这一问题。
selector.parent().find(".pagination a").click(function()
$('#PaginationContainer').on('click', '.testClass', function(e) {
/*-------------------------------------------------
Quick Pager jquery plugin
Copyright (C) 2011 by Dan Drayne
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
v1.1/ 18/09/09 * bug fix by John V - http://blog.geekyjohn.com/
-------------------------------------------------*/
(function($) {
$.fn.quickPager = function(options) {
var defaults = {
pageSize: 10,
currentPage: 1,
holder: null,
pagerLocation: "both"
};
var options = $.extend(defaults, options);
return this.each(function() {
var selector = $(this);
var pageCounter = 1;
selector.wrap("<div class='PaginationContainer' id='PaginationContainer'></div>");
selector.children().each(function(i){
if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
$(this).addClass("PaginationPage"+pageCounter);
}
else {
$(this).addClass("PaginationPage"+(pageCounter+1));
pageCounter ++;
}
});
// show/hide the appropriate regions
selector.children().hide();
selector.children(".PaginationPage"+options.currentPage).show();
if(pageCounter <= 1) {
return;
}
//Build pager navigation
var pageNav = "<ul class='pagination'>";
for (i=1;i<=pageCounter;i++){
if (i==options.currentPage) {
pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
}
else{
if(i<=10){
pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
}
}
}
pageNav += "</ul>";
if(!options.holder) {
switch(options.pagerLocation)
{
case "before":
selector.before(pageNav);
break;
case "both":
selector.before(pageNav);
selector.after(pageNav);
break;
default:
selector.after(pageNav);
}
}
else {
$(options.holder).append(pageNav);
}
//pager navigation behaviour
$('#PaginationContainer').on('click', '.testClass', function(e) {
//grab the REL attribute
var clickedLink = $(this).attr("rel");
options.currentPage = clickedLink;
//Rebuild Pager Nav
$('.pagination').remove();
var pageNav = "<ul class='pagination'>";
var i2 = 1;
if(pageCounter<=10){
i = 0;
}else{
i = parseInt(options.currentPage)-5;
}
while (i<=pageCounter){
if(options.currentPage>=6&&pageCounter>10){
if (i==options.currentPage) {
pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
}
else{
if(i<=parseInt(options.currentPage)+4){
pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
}
}
}
else
{
if(pageCounter<=10){
if (i==options.currentPage) {
pageNav += "<li class='active PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>"+i+"</a></li>";
}
else{
if(i>=1){
pageNav += "<li class='PaginationNav"+i+"'><a rel='"+i+"' href='#' class='testClass'>" +i+"</a></li>";
}
}
}else{
if (i2==options.currentPage) {
pageNav += "<li class='active PaginationNav"+i2+"'><a rel='"+i2+"' href='#' class='testClass'>"+i2+"</a></li>";
}
else{
if(i2<=10){
pageNav += "<li class='PaginationNav"+i2+"'><a rel='"+i2+"' href='#' class='testClass'>"+i2+"</a></li>";
}
}
i2++;
}
}
i++;
}
pageNav += "</ul>";
if(!options.holder) {
switch(options.pagerLocation)
{
case "before":
selector.before(pageNav);
break;
case "both":
selector.before(pageNav);
selector.after(pageNav);
break;
default:
selector.after(pageNav);
}
}
else {
$(options.holder).append(pageNav);
}
if(options.holder) {
$(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("active");
$(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("active");
}
else {
//remove current current (!) page
$(this).parent("li").parent("ul").parent(".PaginationContainer").find("li.active").removeClass("active");
//Add current page highlighting
$(this).parent("li").parent("ul").parent(".PaginationContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("active");
}
//hide and show relevant links
selector.children().hide();
selector.find(".PaginationPage"+clickedLink).show();
return false;
});
});
}
})(jQuery);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.