Пытается конденсировать мой javascript (jquery)

Question

Я относительно новичок в javascript и jquery. Вместо того, чтобы использовать фундамент или бутстрап, я решил бросить и поддерживать собственное решение. Я не слишком беспокоюсь об отдельных компонентах, поскольку раньше я их строил, но реагирующие строки/столбцы были для меня немного беспокоиться.

Этот бит кода непосредственно устанавливает проценты для col1-col-12 и mob1-mob12 (только 12 столбцов, моб только для мобильных устройств).

У меня есть немного 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

Прежде всего я хотел бы сказать, что вы делаете что-то неправильно. JavaScript не место для таких вещей. Это CSS, где вы должны установить размеры. Это связано с тем, что браузеру необходимо загрузить ваш javascript, оценить его и, в конце концов, правильно отобразить ваши страницы. Это особенно важно для мобильных устройств.

Во-вторых, если вы все еще хотите сделать это вещи в JavaScript, вы должны использовать что-то вроде этого:

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 является плохим знаком.