Javascript noob here。
我已经修改了在线可用的插件以更新菜单，只显示当前所选的10个条目-5 / + 5。它实际上适用于第一次点击，然后停止在那里工作（点击一个href在第一次点击之后什么都不做）。
任何人都可以帮我指点我搞砸了吗？
我知道这是一种分页方式，也许不是最佳实践，但对于我正在使用的应用程序和我对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);
答案 0 :(得分：1)
我在回复引用静态父对象的同时将.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);