2011-02-07 117 views
1

我有一個分頁系統實現用戶評論和取決於你點擊了哪一頁我只想在每個方向顯示3頁碼。所以如果你點擊第6頁,那麼只顯示第2-9頁,總共7頁。幫助與jQuery如果語句

我有我的HTML像這樣:

<div id="paging"> 
<span id="1" class="page"></span> 
<span id="2" class="page"></span> 
<span id="3" class="page"></span> 
<span id="4" class="page"></span> 
and so on... 
</div> 

的jQuery/JavaScript的,像這樣:

$(".page").click(function() { 
     var clicked = $(this).attr("id"); 

     var parent = $("#paging span"); 
     $(parent).each(function() { 
      if($(this).attr("id")+ 3 >= clicked) 
      $(this).removeClass("hidden"); 
      else 
      $(this).addClass("hidden"); 
      }); 
}); 

到目前爲止,它是所有應用隱藏類的任何頁碼之前目前點擊一個。

+1

ID必須以字母開頭。 – SLaks 2011-02-07 22:27:34

+1

@SLaks:我不認爲這是真的。我之前在jQuery中使用過HTML中的ID,它們只是數字。 – jwir3 2011-02-07 22:29:39

+1

@ jwir3:他們不需要,但它仍然在規範中。 – jAndy 2011-02-07 22:30:55

回答

1

將您的ID改爲'P1','P2'等。

<div id="paging"> 
    <span id="P1" class="page">A</span> 
    <span id="P2" class="page">B</span> 
    <span id="P3" class="page">C</span> 
    <span id="P4" class="page">D</span> 
    <span id="P5" class="page">E</span> 
    <span id="P6" class="page">f</span> 
    <span id="P7" class="page">g</span> 
    <span id="P8" class="page">h</span> 
    <span id="P9" class="page">i</span> 
<!-- and so on... --> 
</div> 

然後你的JavaScript更改爲:

$(".page").click(function() { 
     var page_clicked = parseInt(this.id.replace(/^P/, '')); 
     $(this).siblings('span').each(function() { 
      var page_no = parseInt(this.id.replace(/^P/, '')); 
      if((page_no >= (page_clicked-3)) && (page_no <= (page_clicked+3))) 
       $(this).removeClass("hidden"); 
      else 
       $(this).addClass("hidden"); 
     }); 
}); 

或者更好的是:

$(".page").click(function() { 
     var page_clicked = parseInt(this.id.replace(/^P/, '')) - 1; 
     var $pages  = $(this).siblings('span'); 
     var from   = Math.max(0,    page_clicked-3); 
     var to   = Math.min($pages.length, page_clicked+3); 

     $pages.addClass('hidden').slice(from,to).removeClass('hidden'); 
}); 
3

$(this).attr("id")返回一個字符串。

您需要通過編寫parseInt($(this).attr("id"), 10)將此字符串轉換爲數字。