jQuery if 문에 대한 도움말

Question

사용자 의견을 위해 구현 된 페이징 시스템이 있으며 클릭 한 페이지에 따라 각 방향으로 3 개의 페이지 번호 만 표시하려고합니다. 따라서 6 페이지를 클릭하면 2 - 9 페이지 만 표시되므로 총 7 가지가 표시됩니다.

내가 그렇게처럼 내 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를/자바 스크립트과 같이 :

$(".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"); 
      }); 
}); 

는 지금까지이하는 모두는 현재 하나를 클릭하기 전에 페이지 번호에 숨겨진 클래스를 적용입니다 .

Answer 1

'P1', 'P2'등과 같이 ID를 변경하십시오. 예 : 더 나은 여전히 ​​

$(".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"); 
     }); 
}); 

나 :

<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> 

그런 다음에 자바 스크립트를 변경

$(".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'); 
}); 

Answer 2

$(this).attr("id")은 문자열을 반환합니다.

parseInt($(this).attr("id"), 10)을 작성하여이 문자열을 숫자로 변환해야합니다.