Стиль переключателя, как определить подпапку?

Question

Я пытаюсь построить переключатель стиля CSS. Как определить подпапку для файлов стилей? В настоящее время, если файлы стилей находятся в корневой папке, сценарий отлично работает. Когда я помещаю файлы стилей под папкой /css, он перестает работать.

Дерево каталогов:

корень
index.html
--css
---- blue.css
---- green.css
---- yellow.css
---- grey.css
--js
---- core.js
---- jquery.js

Любой совет, как я могу его исправить? Вот demo

(function ($j) { 
    switch_style = { 
     onReady: function() {  
      this.switch_style_click(); 
     }, 

     switch_style_click: function(){ 
      $(".box").click(function(){ 
       var id = $(this).attr("id"); 
       $("#switch_style").attr("href", id + ".css"); 
      }); 
     }, 
    }; 

    $j().ready(function() { 
     switch_style.onReady(); 
    }); 
})(jQuery); 

Answer 1

Как Spokey сказал, вы должны указать путь:

$(".box").click(function(){ 
    var id = $(this).attr("id"), 
     path = "css/" + id + ".css"; 
    $("#switch_style").attr("href", path); 
}); 

Или, если у вас есть CSS стилей в разных папках, вы можете установить атрибут «данные» с указанием полного пути к коммутационным дивы вместо идентификаторов

<div class="box" data-href="css/green.css"></div> 
<div class="box" data-href="css2/red.css"></div> 
<div class="box" data-href="css3/blue.css"></div> 
<div class="box" data-href="css4/yellow.css"></div> 

, а затем получить этот путь:

$(".box").click(function(){ 
    var path = $(this).data("href"); 
    $("#switch_style").attr("href", path); 
});