アイテムのリスト (この場合は LI) から単純なページャーを作成するための簡単な jquery プラグインを (学習演習として) 作成しようとしていますが、現在のセレクター (this) をサブに渡すときに問題が発生しました。関数。コードは以下です。
問題は、動的ナビゲーション (プラグインには jquery 1.3 が必要) を作成するときであり、ページャーを構成する実際の表示/非表示を行うサブ関数であるため、セレクターを渡す必要があります。私は次のことを試しています
var selector = $(this);
セレクターを取得するには、次のようにスクリプトの下部にあるサブ関数に渡します。
$(".pageNav a").live("click", function(selector) {
そして、次のようにサブ関数内でセレクターを使用することを望んでいます
$(selector).hide();
しかし、私は何も得ていません。アドバイスをいただければ幸いです。プラグインを完成させる必要はありません。
ありがとう
(function($) {
$.fn.quickPager = function() {
//edit this
var pageSize = 10;
//leave this
var selector = $(this);
var totalRecords = $(this).length;
var currentPage = 1;
var pageCounter = 1;
$(this).each(function(i){
if(i < pageCounter*pageSize && i >= (pageCounter-1)*pageSize) {
$(this).addClass("page"+pageCounter);
}
else {
$(this).addClass("page"+(pageCounter+1));
pageCounter ++;
}
});
//show/hide the appropriate regions
$(this).hide();
$(".page"+currentPage).show();
//first check if there is more than one page. If so, build nav
if(pageCounter > 1) {
//Build pager navigation
var pageNav = "<ul class='pageNav'>";
for (i=1;i<=pageCounter;i++){
if (i==1) {
pageNav += "<li class=currentPage pageNav"+i+"'><a rel='"+i+"' href='#'>Page "+i+"</a></li>";
}
else {
pageNav += "<li class='pageNav"+i+"'><a rel='"+i+"' href='#'>Page "+i+"</a></li>";
}
}
pageNav += "</ul>";
$("#pagerContainer").append(pageNav);
//pager navigation behaviour
$(".pageNav a").live("click", function(selector) {
//grab the REL attribute
var clickedLink = $(this).attr("rel");
currentPage = clickedLink;
//remove current current (!) page
$("li.currentPage").removeClass("currentPage");
//Add current page highlighting
$(this).parent("li").addClass("currentPage");
//hide and show relevant links
//$("ul.paging li").text("TEST");
$(selector).hide();
$(selector+".page"+clickedLink).show();
return false;
});
}
}
})(jQuery);