jquery css styleswitcher 将 cookie 设置为 css答案

【问题标题】：jquery css styleswitcher set cookie to cssjquery css styleswitcher 将 cookie 设置为 css
【发布时间】：2014-11-07 11:42:34
【问题描述】：

我运行了一个 jQuery 样式切换器，它在单击时更改样式表。我尝试了一些解决方案，但我找不到解决方案。我不明白如何为此设置cookie。请问谁能帮我解决这个问题？

标记：

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

【问题讨论】：

所以听起来您想创建一个 cookie 来存储当前/最后一个样式表的名称，因此返回您的页面/站点的用户将具有上次看到的相同样式？该线程将帮助在 JS 或 jQuery 中创建/设置 cookie stackoverflow.com/questions/4825683/…

标签： javascript jquery html css cookies

【解决方案1】：

如果你看一下这个线程 - How do I create and read a value from cookie?，这里有一些用于获取和设置 cookie 的预先编写的 JS 代码。

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

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

我根据您自己的代码为您制作了一个示例。您应该能够进行修改以适应您的情况。 http://jsfiddle.net/biz79/pdjmc0n3/1/

JS：

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

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

如果存在 cookie：

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

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

【讨论】：