JQUERYを使用してCSSファイルを追加/削除する

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

bodyタグでdata-*属性を使用し、保存している場合は、現在アクティブなCSSファイルのURLであるdata-loaded-cssとしましょう。

も$.data()を参照してください