Question

我需要在body标签中添加类（根据bootstrap sm，md，lg，xl sizes）。有更流畅的方式吗？

function body_classes(){
            var current_width = $(window).width();
            if(current_width < 750)
            $('body').addClass("body-xs").removeClass("body-sm").removeClass("body-md").removeClass("body-lg").removeClass("body-xl");
            else if(current_width < 970)
            $('body').addClass("body-sm").removeClass("body-xs").removeClass("body-md").removeClass("body-lg").removeClass("body-xl");
            else if(current_width < 1170)
            $('body').addClass("body-md").removeClass("body-xs").removeClass("body-sm").removeClass("body-lg").removeClass("body-xl");      else if(current_width < 1450)
            $('body').addClass("body-lg").removeClass("body-xs").removeClass("body-sm").removeClass("body-md").removeClass("body-xl");    else 
            $('body').addClass("body-xl").removeClass("body-xs").removeClass("body-sm").removeClass("body-md").removeClass("body-lg");
        }

         body_classes();

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

Answer 1

jQueryUI有一个名为switchClass的方法可能会更好。此外，您可以使用空格作为分隔符删除switchClass方法中的多个类：

function body_classes() {

    var current_width = $(window).width();

    if (current_width < 750) {
        $('body').switchClass("body-sm body-md body-lg body-xl", "body-xs"); 
    } else if (current_width < 970) {
        $('body').switchClass("body-xs body-md body-lg body-xl", "body-sm");
    } else if (current_width < 1170) {
        $('body').switchClass("body-xs body-sm body-lg body-xl", "body-md");  
    } else if (current_width < 1450) {
        $('body').switchClass("body-xs body-sm body-md body-xl", "body-lg");   
    } else { 
        $('body').switchClass("body-xs body-sm body-md body-lg", "body-xl")
    }

};

body_classes();

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

Answer 2

function body_classes() {

var current_width = $(window).width();

if (current_width < 480) {
    $('body').removeClass( 'body-sm body-md body-lg body-xl' );
    $('body').addClass( 'body-xs' );
} else if (current_width < 768) {
  $('body').removeClass( 'body-sm body-md body-lg body-xl' );
    $('body').addClass( 'body-sm' );
} else if (current_width < 992) {
    $('body').removeClass( 'body-sm body-md body-lg body-xl' );
    $('body').addClass( 'body-md' );
} else if (current_width < 1200) {
    $('body').removeClass( 'body-sm body-md body-lg body-xl' );
    $('body').addClass( 'body-lg' );   
} else if (current_width < 1450) {
    $('body').removeClass( 'body-sm body-md body-lg body-xl' );
    $('body').addClass( 'body-xl' );
}

};

将bootstrap大小类添加到body

2 个答案: