Codeigniter 3结合Foundation 6使用开关切换样式表失效问题求助

问题排查及修复方案 #

现存问题点 #

• 样式表定位逻辑错误：当前jQuery代码通过href*=匹配目标样式表，但初始加载的样式表路径不包含dark或lumen关键词，无法匹配到对应DOM元素，自然无法修改路径
• 状态判断逻辑冗余：Foundation开关本质是checkbox组件，自带checked状态，无需额外声明click变量存储状态
• 函数调用语法错误：header.php中base_url外围多了一层单引号，属于PHP语法错误，会导致样式路径输出异常
• 事件绑定类型不合理：checkbox组件用change事件比click事件更稳定，可覆盖点击label触发状态变化的场景

修正后代码 #

1. header.php 样式引入部分

给主题样式表添加唯一ID方便定位，同时修正base_url语法错误：

<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">
    <!-- 给主题样式表加id，默认可自行指定初始加载亮色/深色主题 -->
    <link id="theme-style" rel="stylesheet" href="<?php echo base_url('Foundation/assets/css/lumen/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>

2. jQuery 切换逻辑部分

替换为基于checkbox状态的判断逻辑，直接通过ID定位样式表修改路径：

$("#Switch").on("change", function () {
    const darkUrl = "<?php echo base_url('/Foundation/assets/css/dark/foundation.css')?>";
    const lumenUrl = "<?php echo base_url('/Foundation/assets/css/lumen/foundation.css')?>";
    if (this.checked) {
        $("#theme-style").attr("href", darkUrl);
        console.log("changed to dark theme");
    } else {
        $("#theme-style").attr("href", lumenUrl);
        console.log("changed to light theme");
    }
});

3. 额外确认项

• 确保页面已引入Foundation JS文件，且在DOM加载完成后执行初始化代码：

$(document).foundation();

• 打开浏览器控制台检查样式路径是否存在404错误，确认主题文件存放路径和代码中写的路径一致

内容的提问来源于stack exchange，提问作者zayno70