더보기 클릭 했을때

조건 : 화면에 3개의 이미지가 있다. '더보기' 버튼을 클릭하면 3개가 더 보여져야한다.

 

int listMore = 3;    //최초 3개의 이미지를 보여준다
int totalCnt = 9;    //DB 값에서 리스트의 갯수를 받아올 변수(여기선 9로 지정)

 

-- 화면에 보여질 내용 --

<div class="tbl_area" id="dispRow1>" style="display:none">내용</div>
<div class="tbl_area" id="dispRow2>" style="display:none">내용</div>
<div class="tbl_area" id="dispRow3>" style="display:none">내용</div>
.
.
.

<div class="tbl_area" id="dispRow<%=cnt%>" style="display:none">내용</div> //마지막은 dispRow9 가 된다.

<divid="dispMore" style="display:none">
 <a href="javascript:listMore('<%=totalCnt%>')">더보기</a>
</div>

-- 화면에 보여질 내용 END --

스크립트로 화면이 보여질때 실행 되도록 해준다

<script>
<%
 for (int i=1;i<=totalCnt;i++) //totalCnt 리스트의 최대 갯수만큼 실행 (3번)
 {
      if (i<=listMore)
      {
%>
          document.getElementById("dispRow<%=i%>").style.display = 'block'; //최대 갯수 보다 작거나 같으면 이미지를 보여준다
<%
      }
 }
 if (totalCnt > listMore) //listMore은 현재 화면에 보여주는 이미지 갯수
 {
%>
  document.getElementById("dispMore").style.display = 'block'; //최대갯수보다 화면에 보여주는 이미지 갯수보다 작으면 더보기 버튼을 보여준다
<%
 }
%>
</script>

 

<script>

  function listMore(totalCnt) //더보기 버튼을 눌렀을때 실행되는 함수
  {
   var listMore = document.frmSet.listMore.value; //현재 화면에 보여지는 리스트 갯수를 가져온다(3개)

   var last = Number(listMore) + 3; //더보기를 누르면 3개씩 추가 된다
   
   for (i=Number(listMore)+1;i<=totalCnt;i++) // i=(3+1) -> 최초3개만 보여주니까 다음부턴 4부터 6까지; 4보다 최대 갯수가 같거나 클때 까지; i= 4++
   {
    if (i<=last) // i가 6보다 작거나 같을경우
    {
     document.getElementById("dispRow"+i).style.display = 'block'; //dispRow6 까지 block 처리를 한다
    }
   }
   document.frmSet.listMore.value = last;

   if (totalCnt <= last)
   {
    document.getElementById("dispMore").style.display = 'none'; //더보기 버튼이 최대갯수보다 크거나 작으면 none 처리
   }
  }

</script>