자바스크립트 배열, 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>