为响应式设计删除类的更好方法(可能是不使用媒体查询)

Question

我的代码工作，但它不是"专业"，因为它有一些缺点，像它加载页面每次它调整浏览器窗口的大小，但如果有人输入数据(它将在调整大小后消失…目标应该是在响应式设计中删除一些类，然后在将其调整回桌面pc大小后再添加它们。(也许不需要媒体查询就可以解决)

代码:

     //remove classes for responsive
    var ww = document.body.clientWidth;
    //to be there on page load(without resizing the browser, to get the responsive view)
    $(function () {
        if (ww < 768) {
            //alert("size" + ww);
            console.log(ww);
            $("*").removeClass("BWPaddingLeft");
            $("*").removeClass("BWPaddingRight");
            $("*").removeClass("BWTextLeft");
            $("*").removeClass("BWTextRight");
            $("*").removeClass("BWPaddingLeftRight");
            $("*").removeClass("BWOverFlowNews");
        }
    });

    $(window).resize(function () {
        var ww1 = document.body.clientWidth; //to get the current width
        if (ww1 > 767 ) {
            window.location.href = document.URL; //load the page to get the removed classes after resizing
            //Problem it will not just once..(after resizing the browser)
        }
        else {
            //removing not needed classes for responsive design
            $("*").removeClass("BWPaddingLeft");
            $("*").removeClass("BWPaddingRight");
            $("*").removeClass("BWTextLeft");
            $("*").removeClass("BWTextRight");
            $("*").removeClass("BWPaddingLeftRight");
            $("*").removeClass("BWOverFlowNews");
        }
    });

Answer 1

也许不是删除类，而是将它们替换为其他?

//to remove class
$(".BWPaddingLeft").removeClass("BWPaddingLeft").addClass("BWPaddingLeft-inactive"); 
//to add class again
$(".BWPaddingLeft-inactive").removeClass("BWPaddingLeft-inactive").addClass("BWPaddingLeft");

Answer 2

可以传入多个以空格分隔的类名:

 $("*").removeClass("BWPaddingLeft  BWPaddingLeft BWTextLeft BWTextRight ...etc");

Answer 3

也许是这样的?将类存储在一个变量中，并在需要时切换它。

//remove classes for responsive
    var css = "BWPaddingLeft BWPaddingRight BWTextLeft BWTextRight BWPaddingLeftRight BWOverFlowNews";
    var ww = document.body.clientWidth;
    //to be there on page load(without resizing the browser, to get the responsive view)
    $(function () {
        $("*").toggleClass(css, (ww >= 768));
    });

    $(window).resize(function () {
        var ww1 = document.body.clientWidth; //to get the current width
        if (ww1 > 767 ) {
            window.location.href = document.URL; //load the page to get the removed classes after resizing
            //Problem it will not just once..(after resizing the browser)
        }
        else {
            $("*").removeClass(css);
        }
    });