Переключатель таблиц стилей Codeigniter 3 с css-фреймворком Foundation 6

#jquery #css #codeigniter #foundation

Вопрос:

Я наткнулся на проблему, у меня есть скрипт Jquery для изменения таблиц стилей, в исходном сценарии используется кнопка. Я хочу использовать переключатель с базовым 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>
 

Ответ №1:

Вы можете проверить, в чем проблема, открыв DevTools в своем браузере. На вкладке консоль вы можете увидеть, есть ли какие-либо ошибки. Потому что вы не написали свою проблему ясно, поэтому я просто предполагаю, что у вас могут возникнуть проблемы. Во-первых, убедитесь, что вы включили jquery в сценарий, который может выполняться. Во-вторых, убедитесь, что все ваши стили в коде расположены в правильном направлении. И в-третьих, вы указали неверную ссылку в теге ссылки, поэтому 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 на то, что вы хотите, но убедитесь, что вы выбрали его правильно.