내 자바 스크립트 (jquery)를 축축하게하려고 시도

Question

나는 상대적으로 자바 스크립트와 jquery에 익숙하다. 기초 또는 부트 스트랩을 사용하기보다는 스스로 솔루션을 롤아웃하고 유지 관리하기로 결정했습니다. 이전에는 대부분 구성한 개별 구성 요소가 너무 걱정스럽지 않지만 반응 형 행/열은 나에게 조금 걱정 스러웠습니다.

이 코드는 col1-col-12 및 mob1-mob12 (12 열, mob는 모바일 전용)의 비율을 직접 설정합니다.

나는 이걸 가지고 놀고있는 CSS를 가지고있다. 나는이 기능에 비교적 만족하지만 다른 솔루션이나 프로그래밍 방식으로 내 솔루션을 더욱 더 압축하는 방법을 알지 못합니다. 어떤 조언에 미리

감사 : 모든

$(document).ready(function(){ 
     var colElements = ".row, .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12"; 
     var col1 = "8%"; 
     var col2 = "16%"; 
     var col3 = "25%"; 
     var col4 = "33%"; 
     var col5 = "41%"; 
     var col6 = "50%"; 
     var col7 = "58%"; 
     var col8 = "66%"; 
     var col9 = "75%"; 
     var col10 = "83%"; 
     var col11 = "91%"; 
     var col12 = "100%"; 
     function convertToPercent(n){ 
      var output = n.toString(); 
      output = output.concat("%"); 
      return output 
     } 
     function responsiveAdjust(){ 
      $("body").find(colElements).each(function(){ 
       if($(this).hasClass("row")){ 
        $(this).width("100%");} 
       if ($("body").width() > 499){ 
       if($(this).hasClass("col1")){ 
        $(this).width(col1); 
       } 
       else if($(this).hasClass("col2")){ 
        $(this).width(col2); 
       } 
       else if($(this).hasClass("col3")){ 
        $(this).width(col3); 
       } 
       else if($(this).hasClass("col4")){ 
        $(this).width(col4); 
       } 
       else if($(this).hasClass("col5")){ 
        $(this).width(col5); 
       } 
       else if($(this).hasClass("col6")){ 
        $(this).width(col6); 
       } 
       else if($(this).hasClass("col7")){ 
        $(this).width(col7); 
       } 
       else if($(this).hasClass("col8")){ 
        $(this).width(col8); 
       } 
       else if($(this).hasClass("col9")){ 
        $(this).width(col9); 
       } 
       else if($(this).hasClass("col10")){ 
        $(this).width(col10); 
       } 
       else if($(this).hasClass("col11")){ 
        $(this).width(col11); 
       } 
       else if($(this).hasClass("col12")){ 
        $(this).width(col12); 
       }} 
       if($("body").width() < 500){ 
       if($(this).hasClass("mob1")){ 
        $(this).width(col1); 
       } 
       else if($(this).hasClass("mob2")){ 
        $(this).width(col2); 
       } 
       else if($(this).hasClass("mob3")){ 
        $(this).width(col3); 
       } 
       else if($(this).hasClass("mob4")){ 
        $(this).width(col4); 
       } 
       else if($(this).hasClass("mob5")){ 
        $(this).width(col5); 
       } 
       else if($(this).hasClass("mob6")){ 
        $(this).width(col6); 
       } 
       else if($(this).hasClass("mob7")){ 
        $(this).width(col7); 
       } 
       else if($(this).hasClass("mob8")){ 
        $(this).width(col8); 
       } 
       else if($(this).hasClass("mob9")){ 
        $(this).width(col9); 
       } 
       else if($(this).hasClass("mob10")){ 
        $(this).width(col10); 
       } 
       else if($(this).hasClass("mob11")){ 
        $(this).width(col11); 
       } 
       else if($(this).hasClass("mob12")){ 
        $(this).width(col12); 
       }else if($(this).hasClass("col1")){ 
        $(this).width(col1); 
       } 
       else if($(this).hasClass("col2")){ 
        $(this).width(col2); 
       } 
       else if($(this).hasClass("col3")){ 
        $(this).width(col3); 
       } 
       else if($(this).hasClass("col4")){ 
        $(this).width(col4); 
       } 
       else if($(this).hasClass("col5")){ 
        $(this).width(col5); 
       } 
       else if($(this).hasClass("col6")){ 
        $(this).width(col6); 
       } 
       else if($(this).hasClass("col7")){ 
        $(this).width(col7); 
       } 
       else if($(this).hasClass("col8")){ 
        $(this).width(col8); 
       } 
       else if($(this).hasClass("col9")){ 
        $(this).width(col9); 
       } 
       else if($(this).hasClass("col10")){ 
        $(this).width(col10); 
       } 
       else if($(this).hasClass("col11")){ 
        $(this).width(col11); 
       } 
       else if($(this).hasClass("col12")){ 
        $(this).width(col12); 
       }} 


       $(this).width(
        //reduce by element's margin 
        $(this).width() - 
        (($(this).outerWidth(true) - $(this).width()) + 
        //reduce by percentage element is of total from parent padding 
        ( //parent padding 
         ($(this).parent().innerWidth() - $(this).parent().width()) * 
         //percentage of parent 
         ($(this).outerWidth(true)/$(this).parent().width()) 
        )+2 
        )); 

      }); 
     } 

     responsiveAdjust(); 
     window.onresize = function(event) { 
      responsiveAdjust(); 
     } 
    }); 

Answer 1

먼저 나는 당신이 일이 잘못하고 있는지 말할 것입니다. 자바 스크립트는 그런 것들을위한 장소가 아닙니다. 크기를 설정해야하는 CSS입니다. 브라우저가 자바 스크립트를 다운로드하고 평가해야하기 때문에 결과적으로 페이지를 올바르게 렌더링 할 수 있습니다. 특히 모바일에서는 이것이 매우 중요합니다. 당신은 여전히 ​​자바 스크립트에서이 일을 수행하려는 경우

둘째,이 같은 것을 사용해야합니다

var sizes = { 
    col1: "8%", 
    col2: "16%", 
    col3: "25%", 
    col4: "33%", 
    col5: "41%", 
    col6: "50%", 
    col7: "58%", 
    col8: "66%", 
    col9: "75%", 
    col10: "83%", 
    col11: "91%", 
    col12: "100%", 
    row: "100%" 
} 

for(var size in sizes) { 
    var el = $("." + size); 
    if(el.length > 0 && el.hasClass("mob11")){ 
     el.width(sizes[size]); 
    }  
} 

그냥 배열과 보간을 사용합니다. if-else 문이 많으면 나쁜 신호입니다.