Question

我对javascript和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

首先，我会说你犯了错误。 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语句是一个不好的迹象。

试图压缩我的javascript（jquery）

1 个答案: