Question

美好的一天！

我想根据列表的大小添加和删除CSS文件。我的代码如下：

$("#size_storedList").ready(function(){
    var list_size = $("#size_storedList").attr('value');
    if(list_size <= 4){
        if ($("link").is('.size5')){
            $('link.size5').removeClass();
        }
        if ($("link").is('.size6')){
            $('link.size6').removeClass();
        }
        $('head').append('<link class="size4" rel="stylesheet" href="css/stored_list/list_size4.css" type="text/css" />');
    } else if(list_size == 5){
        if ($("link").is('.size4')){
            $('link.size4').removeClass();
        }
        if ($("link").is('.size6')){
            $('link.size6').removeClass();
        }
        $('head').append('<link class="size5" rel="stylesheet" href="css/stored_list/list_size5.css" type="text/css" />');
    } else if(list_size == 6){
        if ($("link").is('.size4')){
            $('link.size4').removeClass();
        }
        if ($("link").is('.siz5')){
            $('link.size5').removeClass();
        }
        $('head').append('<link class="size6" rel="stylesheet" href="css/stored_list/list_size6.css" type="text/css" />');
    }
});

但它有点乱。我该怎么做才能最大限度地减少检查文件是否已存在以便我可以将其删除

if ($("link").is('.size5')){
            $('link.size5').removeClass();
}

谢谢。

Answer 1

<link rel="stylesheet" href="default.css" type="text/css">

<ul>
  <li><a id="css-red" href="#red">Red</a></li>
  <li><a id="css-blue" href="#blue">Blue</a></li>
  <li><a id="css-green" href="#green">Green</a></li>
</ul>

$(document).ready(function() {
  // red
  $("#css-red").click(function() {
    $("link[rel=stylesheet]").attr({href : "red.css"});
  });
});

以上概念与您不同，但我认为这将是一个好主意。您可以根据当前代码进行自定义。

Answer 2

您可以在data-*标记上使用body属性并保存，例如data-loaded-css，即当前活动的css文件的网址。

另见$.data()

使用JQUERY添加/删除css文件

2 个答案: