jquery - 样式切换器，如何定义子文件夹？

Question

我正在尝试构建一个 CSS 风格的切换器。如何为样式表文件定义子文件夹？目前，如果样式表文件位于根文件夹中，则脚本可以正常工作。当我将样式表文件放在文件/css夹下时，它会停止工作。

目录树：

根
index.html
--css
----blue.css
----green.css
----yellow.css
----grey.css
--js
----core.js
----jquery .js

有什么建议我该如何解决？这是演示

(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 的完整路径而不是 id

<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);
});