jquery - 如果主体类发生变化，使用 jQuery 替换 CSS 样式表

Question

我脑子里有一个样式表如下:

<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css">

如果 body#main.whatever 类发生变化(例如在不同的页面上)，我将尝试用以下样式表替换上面的样式表。

即

改变自: body#main.itemid113

到: body#main.itemid114

<script>
jQuery(document).ready(function() {

   $('body#main.itemid113').replaceWith('<link rel="stylesheet" id="main" href="/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css" type="text/css" />');

   $('body#main.itemid114').replaceWith('<link rel="stylesheet" id="main" href="/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css" type="text/css" />');

});
</script>

我该怎么做 - 上面的方法不起作用。

这对吗？

jQuery(function($){
    if ($('.itemid113').length){
        $('body').append("<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css" type="text/css" />");
    };
    if ($('.itemid114').length){
        $('body').append("<link rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css");
    }
});

Answer 1

完成此操作的最简单方法是将 id 添加到您的链接标记，即:

<link id="theme" rel="stylesheet" href="/templates/jooswatch-v3-5/css/bootswatch/superhero/bootstrap.min.css">

然后你的脚本变成:

jQuery(function($){
    if ($('.itemid113').length){
        $('#theme').attr("href","/templates/jooswatch-v3-5/css/bootswatch/cerulean/bootstrap.min.css");
    };
    if ($('.itemid114').length){
        $('#theme').attr("href", "/templates/jooswatch-v3-5/css/bootswatch/cosmo/bootstrap.min.css");
    }
});