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样式表，则可以设置“data”属性，其中包含切换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);
});

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

1 个答案: