jquery - 根据主题更改 css 并删除以前的主题 css

Question

我具有根据用户选择添加主题的 css 文件并删除先前选择的 theme.css 文件的功能。我写了这段代码

var previousTheme="theme1";
var show='theme1';
$(document.body).on('change', '#selecttheme', function () {
    show = $("option:selected", this).data('show');
    $("#hue-demo-bg-div").fadeToggle("3000", function(){
        $("#hue-demo-bg-div").removeClass(previousTheme).addClass(show).css('background-color',"");
        $(document.head).find('#themecss').attr("href","/assets/css/"+show+".css");
        $('#heading_preview').css('color',"");
        $('#description_preview').css('color',"");
        $('#btn_text_preview').css('color',"");
        $('#hue-demo-link-div').css('background-color',"");
        $('#paragraph_preview').css('color',"");
        $('#decline_preview').css('color',"");
        $('#leadsnowheader').css('background-color',"");
   });
   previousTheme=show;
   $("#hue-demo-bg-div").fadeToggle("3000", function(){
         loadColorValues();
   });
});

此代码在本地主机上运行良好。但在服务器上它无法正常工作。加载 css 需要很多时间。这段代码有什么帮助或改进吗？

Answer 1

用纯 JavaScript 重写所有内容。然后缩小文件。此外，缩小所有应加载的 CSS 文件。此外，.change(function(){}); 比 .on('change', function() {});

更快

我知道将所有内容都放在 variables 中会增加可读性，但是让 jQuery 循环遍历元素系统以查找 variables 会减少时间。

现在，服务器端有很多因素会影响这一点。我什至不知道从哪里开始......