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

Question

我偶然发现了一个问题，我有一个 Jquery 脚本来更改原始脚本使用按钮的样式表。 我想在 Foundation css 框架中使用一个开关，但我无法让它工作，也许我遗漏了一些东西。这是 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 包含到脚本中可以运行。 其次，确保您的代码中的所有样式都位于正确的路径中。 第三，您在链接标签中指定了 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 值更改为您想要的任何值，但请确保选择正确。