带有 Foundation 6 css 框架的 Codeigniter 3 样式表切换器

Question

我偶然发现了一个问题，我有一个 Jquery 脚本来更改样式表，原始脚本使用一个按钮。我想在 Foundation css 框架中使用 switch，但我无法使它工作，也许我缺少 something.here 是 jquery 代码：

var click = false;
            $("#Switch").on("click", function () {
                if (!click) {
                    $('link[href*="<?php echo 
               base_url('/Foundation/assets/css/dark/foundation.css')?>"]').attr(
                        "href",
                        "<?php echo 
               base_url('/Foundation/assets/css/dark/foundation.css')?>"
                    );
                    click = true;
                    console.log("changed to style1.css");
                } else {
                    $('link[href*="<?php echo 
               base_url('/Foundation/assets/css/lumen/foundation.css')?>"]').attr(
                        "href",
                        "<?php echo 
               base_url('/Foundation/assets/css/lumen/foundation.css')?>"
                    );
                    click = false;
                    console.log("changed to style.css");
                }
            });

这里是 header.php 代码：

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="<?php echo 
        'base_url'('Foundation/assets/css/foundation.css'); ?>">
        <link rel="stylesheet" href="<?php echo 
        'base_url'('Foundation/assets/css/main.css'); ?>">
        <link rel="stylesheet" href="<?php echo 
        'base_url'('FontAwesome/css/fontawesome.css'); ?>">
        <title><?php echo $title ?></title>
    
      </head>

这里是开关：

<input
                        class="switch-input Switch"
                        id="Switch"
                        type="checkbox"
                        name="exampleSwitch"
                    />
                    
                    <label class="switch-paddle" for="Switch">
                        <span class="show-for-sr">Download Kittens</span>
                    </label>

Answer 1

您可以通过在浏览器上打开 DevTools 来检查您遇到了什么问题。在控制台选项卡中，您可以查看是否有任何错误。因为你没有把你的问题写清楚，所以我只是猜测你可能遇到的问题。首先，确保将 jquery 添加到脚本中运行。其次，确保代码中的所有样式都在正确的路径中。第三，您在 link 标签中指定的 href 错误，因此 jquery 无法更改属性值，更改为：

$('link[href*="<?php echo base_url('/Foundation/assets/css/foundation.css') ?>"]').attr(
                    "href",
                    "<?php echo
                        base_url('/Foundation/assets/css/dark/foundation.css') ?>"
                );

首次加载时，href 属性为 Foundation/assets/css/foundation.css，但在您的代码中为 '/Foundation/assets/css/dark/foundation.css'，因此它无法更改该值。将您的 href 值更改为您想要的任何值，但请确保您 select 它是正确的。

带有 Foundation 6 css 框架的 Codeigniter 3 样式表切换器

Codeigniter 3 stylesheet switcher with Foundation 6 css framework

css

jquery

codeigniter

zurb-foundation