Codeigniter 3 stylesheet switcher with Foundation 6 css framework-CodePudding

I have stumbled upon a problem i have a Jquery script to change stylesheets the original script uses a button. I want to use a switch with Foundation css framework but i cannot make it work maybe i'm missing something.here is the jquery code:

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

here is the header.php code:

<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>

here is the switch:

<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>

CodePudding user response：

You can check what's problem you got by open DevTools on your browser. In console tab you can see if there's any errors. Because you didn't write your problem clear, so I just guess problems you may have. First, make sure you include jquery to the script can run. Second, make sure you have all your styles in your code in the right path. And third, you specific href in link tag wrong so jquery cannot change the attribute value, change to this:

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

When first load, the href attribute is Foundation/assets/css/foundation.css but in your code is '/Foundation/assets/css/dark/foundation.css' so it cannot change the value. Change your href value to whatever you want but make sure you select it right.