jquery css样式转换程序将cookie设置为css。

Question

我运行了一个jQuery样式转换程序，它可以在单击时更改样式表，我尝试了一些解决方案，但找不到解决方案。我不知道该如何设置曲奇。有谁能帮我解决这个问题吗？

标记：

    <ul class="colors-list">
        <li><a title="Black" id="black" class="black" ></a></li>
        <li><a title="Green" id="green" class="green" ></a></li>
        <li><a title="Blue" id="blue" class="blue" ></a></li>

    </ul>

jQuery

<pre><code>(function ($) {
"use strict";
var mainApp = {

    main_fun: function () {

        /*=====================================
         THEME SWITCHER SCRIPTS 
        ===================================*/

        //THE CALLING OF PANEL ON CLICKING PLUS BUTTON 

        jQuery('#switch-panel').click(function () {
            if (jQuery(this).hasClass('show-panel')) {
                jQuery('.switcher').css({ 'left': '-50px' });
                jQuery('#switch-panel').removeClass('show-panel');
                jQuery('#switch-panel').addClass('hide-panel');
            } else if (jQuery(this).hasClass('hide-panel')) {
                jQuery('.switcher').css({ 'left': 0 });
                jQuery('#switch-panel').removeClass('hide-panel');
                jQuery('#switch-panel').addClass('show-panel');
            }
        });

        $('#black').click(function () {
            $('#mainCSS').attr('href', 'assets/css/style.css');  //THE STYLE SHEETS WITH THEIR PATHS
        });
        $('#blue').click(function () {
            $('#mainCSS').attr('href', 'assets/css/blue.css');  //THE STYLE SHEETS WITH THEIR PATHS
        }); 
        $('#green').click(function () {
            $('#mainCSS').attr('href', 'assets/css/green.css');   //THE STYLE SHEETS WITH THEIR PATHS
        });
        $('#red').click(function () {
            $('#mainCSS').attr('href', 'assets/css/red.css');    //THE STYLE SHEETS WITH THEIR PATHS
        });



    },

    initialization: function () {
        mainApp.main_fun();

    }

}


$(document).ready(function () {
    mainApp.main_fun();
});

}(JQuery)；

Answer 1

如果您看一下这个线程- How do I create and read a value from cookie?，就会看到一些预先编写的JS代码来获取和设置cookie。

在这种情况下，可以在jQuery .click处理程序中设置cookie值。

您还需要一些在文档准备好时运行的代码，检查客户机上是否存在cookie。如果存在，则将样式表设置为cookie的值。

我已经根据你自己的代码为你做了一个例子。你应该能够修改以适应你的情况。http://jsfiddle.net/biz79/pdjmc0n3/1/

联署材料：

创建/设置有效期为1天的cookie

    $('#black').click(function () {
      // stylesheet stuff...
      createCookie('cookie','black',1);
    });
    $('#blue').click(function () {
      // stylesheet stuff...
      createCookie('cookie','blue',1);
    }); 
    //...

如果饼干存在：

    $(document).ready(function(){
      updateResult();
    });

    function updateResult() {
      var cookieValue = getCookie('cookie');
      if (cookieValue.length) {
        $('#mainCSS').attr('href', 'assets/css/' + cookieValue + '.css');
      }
    }