프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] 자바스크립트 배열, for문을 이용한 리스트 동적 생성

2023.04.14
북마크 작성자 정보
자바스크립트 배열, for문을 이용한 리스트 동적 생성

데이터가 되는 부분은 배열, 스킨에 해당되는 부분은 공통이므로 for문을 이용해 돌렸다.

조건 1) 리스트가 몇개든 4개만 show, 나머진 hide 버튼에 개수.
http://relation.co.kr/images_board/board_system_publishing/307/index.html
 
<script>
      var $sec_total = 5+1;
      var $ls_sec = ""; 
      for(let $k=1; $k<$sec_total; $k++){
        window[ "items_"+$k]= "";
        $ls_sec += "<article><div class="ls_area items_"+$k+""></article>";
      }
    
      $("#ls_area").html( $ls_sec );
      /*
      var items_1 ="";
      var items_2 ="";
      var items_3 ="";
      var items_4 ="";
      */
      let arry = [
          {gbn:"1", brd:"GOODS SHOP", gname:"1GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"1", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"1", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"1", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"1", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"1", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"1", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"1", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },

          {gbn:"2", brd:"GOODS SHOP", gname:"2GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"2", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"2", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"2", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"2", brd:"GOODS SHOP", gname:"22GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"2", brd:"GOODS SHOP", gname:"22GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          
          {gbn:"3", brd:"GOODS SHOP", gname:"3GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"3", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"3", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"3", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"3", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"3", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"3", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
        
          {gbn:"4", brd:"GOODS SHOP", gname:"4GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"4", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"4", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"4", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"4", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
        
          {gbn:"5", brd:"GOODS SHOP", gname:"4GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"5", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"5", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"5", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
          {gbn:"5", brd:"GOODS SHOP", gname:"GOODS_NAME", prd:"10,000 <span>won</span>", img:"", path:"#" },
      ];

      let arry_total = arry.length;      
      for(let i= 0; i<arry_total; i++){
          var $gbn = arry[i]['gbn'];   /* console.log("gbn : "+ $gbn); */
          
          if( !window[ 'count_'+$gbn ] ){  
              window[ 'count_'+$gbn ] = 0; 
            
              if( $gbn > 1  ){
                  var $pre_gbn = $gbn-1;
                  if( window[ 'count_'+$pre_gbn ] > 4 ){
                      var $hide_total =  window[ 'count_'+$pre_gbn ] - 4;
                      window[ 'items_'+$pre_gbn ] += "</div><div class="btn_area"><div class="btn off"  data-btnno=""+$pre_gbn+"" data-htotal=""+$hide_total+"">열려라~"+$hide_total+"</div></div>";
                  }
              }
          }
          
          if( window[ 'count_'+$gbn ] == 4 ){ 
              window[ 'items_'+$gbn ] += "<div class="hide_area hide_area_"+$gbn+"">";
              window[ 'items_h_'+$gbn] = 0; 
          }
        
          window[ 'items_'+$gbn ] += "<div class="item_area"><a href=""+arry[i]['path']+""><div class="img_box"></div><div class="infor"><ul><li class="brd">"+arry[i]['brd']+"</li><li class="name">"+arry[i]['gname']+"</li><li class="pri">"+arry[i]['prd']+"</li></ul></div></a></div>";
          
          window[ 'count_'+$gbn ]++; 
          if( window[ 'items_h_'+$gbn] == true){ window[ 'items_h_'+$gbn]++ } 
        
          if( window[ 'count_'+$gbn ] > 4 &&  i == arry_total-1 ){   
              var $hide_total2 =  window[ 'count_'+$gbn ] - 4;
              window[ 'items_'+$gbn ] += "</div><div class="btn_area"><div class="btn off" data-btnno=""+$gbn+"" data-htotal=""+$hide_total2+"">열려라~"+$hide_total2+"</div></div>";
          }
      }
    
      /*
      console.log("count_1 :"+count_1);
      console.log("count_2 :"+count_2);
      console.log( "items_1: "+items_1 );
      console.log( "items_2: "+items_2 );
      $(".items_1").html(items_1);
      $(".items_2").html(items_2);
      $(".items_3").html(items_3);
      $(".items_4").html(items_4);
      $(".items_4").html(items_5);
      */
      for(var $j=1; $j<$sec_total; $j++){
        $(".items_"+$j).html( window["items_"+$j] );
        console.log("check "+$j  );
      }
    
      $(".btn").click( function(){
          let $btn_no = $(this).attr("data-btnno");
          let $htotal = $(this).attr("data-htotal");
          if( $(".hide_area_"+$btn_no).css("display") == "none"){
              $(".hide_area_"+$btn_no).slideDown();
              $(this).removeClass("off");
              $(this).addClass("on");  
              $(this).text("닫아라~");
          }else{
              $(".hide_area_"+$btn_no).slideUp();
              $(this).removeClass("on");
              $(this).addClass("off");
              $(this).text("열려라~"+$htotal);
          }
      });
  </script>

이 포스트 공유하기

전체목록