将 jquery .click 存储为 cookie

Question

下午，提前感谢那些喜欢尝试一下的人。

我有一个客户稍微改变了他们的要求，现在希望在他们的网站上添加一些东西。

我使用 jquery .click 更改网站上的大量 css，以便为有视力问题的人提供不同级别的可访问性。

这是网站，换色器在顶部。 http://www.dsndev.dewinterdev.co.uk

<div id="colour-scheme">
<p>
    Colour Scheme <span class="default"><button onclick="reloadPage()">A</button></span>
    <span class="white"><button>A</button></span>
    <span class="yellow"><button>A</button></span>
</p>

这是代码`http://jsfiddle.net/ZNuWg/

我想将信息存储在一个 cookie 中，这样当用户单击按钮时，他们可以返回到具有正确配色方案的站点。

Answer 1

虽然解决您关于点击和 cookie 的情况很简单，但请注意，我已经抽象出代码以对单独的函数进行所有更改以允许重用，我可能会将所有 css 更改移动到 2 个单独的 css文件并加载它们，而不是执行所有的 javascript。我已经从这里添加了 jQuery cookie 插件https://github.com/carhartl/jquery-cookie

小提琴：

http://jsfiddle.net/robschmuecker/ZNuWg/2/

Javascript：

jQuery(document).ready(function () {
    jQuery(".white button").click(function(){setWhite()});
    jQuery(".yellow button").click(function(setYellow()});

    //Do the cookie check 
    //Check color cookie value
    if (jQuery.cookie('color') == 'White') {
        setWhite();
    } else if (jQuery.cookie('color') == 'Yellow') {
        setYellow();
    }


    function setWhite() {
        //First set the cookie
        jQuery.cookie('color', 'White');

        //jQuery(".top-bar").css("border-bottom","0px solid #189AC2");
        //social links
        jQuery(".menu-logo img").attr('src', '/wp-content/themes/dsn/images/logo-white.png');
        jQuery(".logo img").attr('src', '/wp-content/themes/dsn/images/logo-white.png');
        jQuery(".facebook").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-white.png)");
        jQuery(".twitter").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-white.png)");
        jQuery(".pintrest").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-white.png)");
        jQuery(".youtube").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-white.png)");
        jQuery(".linkedin").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-white.png)");
        jQuery(".google").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-white.png)");
        jQuery("#bslvideoshow").css("background", "url(/wp-content/themes/dsn/images/bsl-video.png) repeat scroll 0 center rgba(0, 0, 0, 0)");
        //latest news section
        jQuery("#latest-news h2").css("color", "#189AC2");
        jQuery("#latest-news h2").css("border-bottom", "1px solid #189AC2");
        jQuery("#latest-news h3").css("color", "#189AC2");
        jQuery("#latest-news p").css("color", "#000000");
        jQuery("#latest-news a").css("color", "#189AC2");
        //twitter section
        jQuery("#index-twitter").css("background-image", "url(wp-content/themes/dsn/images/twitter-white.png)");
        jQuery("#index-twitter").css("background-size", "85% auto");
        jQuery("#index-twitter p").css("color", "#ffffff");
        jQuery("#index-twitter iframe").css("margin-left", "54px");
        //footer & copyright
        jQuery(".top-bar-full p").css("color", "");
        jQuery("#controls a").css("color", "");
        jQuery(".copyright ul li").css("border-right", "");
        //footer-section
        jQuery(".footer").css("border-top", "");
        jQuery("#bottom-grid h2").css("color", "");
        jQuery("#bottom-grid h3").css("color", "");
        jQuery("#latest-news h2").css("border-bottom");
        jQuery("#bottom-grid").css("color", "");
        jQuery("#bottom-grid p").css("color", "");
        jQuery("#bottom-grid a").css("color", "");
        //forms
        jQuery("#search button").css("background", "");
        jQuery("#keep-in-touch button").css("background", "");
        jQuery(".stayconnectedright i").css("background", "");
        //main-menu
        jQuery(".index-menu li").css("border", "none");
        jQuery(".index-menu li").css("padding", "57px 0");
        jQuery(".index-menu a").css("background", "");
        jQuery(".index-menu li a").css("border", "");
        jQuery(".index-menu .sub-menu a").css("border", "");
        jQuery(".index-menu .sub-menu").css("background", "");
        jQuery(".index-menu a").css("color", "");
        jQuery(".index-menu .sub-menu").css("border", "");
        jQuery(".the-content p").css("color", "#000000");
        jQuery(".the-content h2").css("color", "#000000");
        jQuery(".sub-menu-wrap").css("background", "#ffffff");
        jQuery(".sub-menu-wrap span").css("color", "#000");
        jQuery(".download-module a").css("color", "#000");
        jQuery(".section-title").css("color", "#000");
        jQuery(".section-title").css("border-top", "1px solid #000");
        jQuery(".main-menu li").css("background", "");
        jQuery(".menu-item-389").css("border", "");
        jQuery(".content-navigation ul li").css("border", "");
        jQuery("#latest-news h2").css("color", "#000");
        jQuery(".title").css("color", "#000");
        jQuery("#latest-news h2").css("border-bottom", "1px solid#000");
        jQuery("#latest-news a").css("color", "#000");
        jQuery(".the-content a").css("color", "#000");
        jQuery(".the-content a").css("text-decoration", "underline");
        jQuery(".sd-title").css("color", "#000 !important");
        jQuery(".the-date").css("color", "#fff");
        jQuery(".archive-nav a").css("color", "#000");
        jQuery(".archive-nav a:hover").css("font-weight", "bold");
        jQuery(".archive-nav").css("border-bottom", "1px solid #000");
        jQuery(".footer").css("border-top", "none");
        jQuery(".content-navigation li a").css("color", "#fff");
        //top and bottom background colours
        var bodyclass = $('body').attr('class');
        jQuery(".top-bg-white").addClass(bodyclass);
        jQuery(".bottom-bg-white").addClass(bodyclass);
        jQuery("body").css("background", "none repeat scroll 0 0 #FFFFFF");
        jQuery(".madeby").css("color", "#000");
        jQuery(".post-board p").css("color", "#000");
        jQuery(".post-board a").css("color", "#000");
        jQuery(".post-board a").css("text-decoration", "underline");
        jQuery(".the-date p").css("color", "#fff");
        jQuery(".madeby").css("color", "#fff");
        jQuery(".archive-nav ul li").css("background", "url(/wp-content/themes/dsn/images/bullet-keyline1.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0)");
        jQuery(".archive-nav .current-menu-item").css("background", "url(/wp-content/themes/dsn/images/bullet-keyline.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0)");
        jQuery(".top-bg-yellow").css("display", "");
        jQuery(".bottom-bg-yellow").css("display", "");
        jQuery(".footer-logos img").attr("src", "");
    }

    function setYellow() {

        //First set the cookie
        jQuery.cookie('color', 'Yellow');

        jQuery("body").css("background", "none repeat scroll 0 0 #f7e463");
        jQuery(".top-bg-yellow").css("display", "block");
        jQuery(".bottom-bg-yellow").css("display", "block");
        jQuery(".menu-logo img").attr("src", "/wp-content/themes/dsn/images/logo-yellow.png");
        //social links
        jQuery(".logo img").attr('src', '/wp-content/themes/dsn/images/logo-yellow.png');
        jQuery(".facebook").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-yellow.png)");
        jQuery(".twitter").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-yellow.png)");
        jQuery(".pintrest").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-yellow.png)");
        jQuery(".youtube").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-yellow.png)");
        jQuery(".linkedin").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-yellow.png)");
        jQuery(".google").css("background-image", "url(/wp-content/themes/dsn/images/social-widget-yellow.png)");
        jQuery("#bslvideoshow").css("background", "url(/wp-content/themes/dsn/images/bsl-video-yellow.png) no-repeat scroll 0 center rgba(0, 0, 0, 0)");
        //latest news section
        jQuery("#latest-news h2").css("color", "#000000");
        jQuery("#latest-news h2").css("border-bottom", "1px solid #000000");
        jQuery("#latest-news h3").css("color", "#000000");
        jQuery("#latest-news p").css("color", "#000000");
        jQuery("#latest-news a").css("color", "#000000");
        //twitter section
        jQuery("#index-twitter").css("background-image", "url(wp-content/themes/dsn/images/twitter-yellow.png)");
        //footer-section
        jQuery(".footer").css("border-top", "1px solid #000000");
        jQuery("#bottom-grid h2").css("color", "#000000");
        jQuery("#bottom-grid h3").css("color", "#000000");
        jQuery("#latest-news h2").css("border-bottom", "1px solid #000000");
        jQuery("#bottom-grid").css("color", "#000000");
        jQuery("#bottom-grid p").css("color", "#000000");
        jQuery("#bottom-grid a").css("color", "#000000");
        //top bar
        jQuery(".top-bar a").css("color", "#000000");
        jQuery(".top-bar p").css("color", "#000000");
        jQuery(".top-bar").css("border-bottom", "1px solid #000000");
        //forms
        jQuery("#search button").css("background", "#000000");
        jQuery("#keep-in-touch button").css("background", "#000000");
        jQuery(".stayconnectedright i").css("background", "#000000");
        //main-menu
        jQuery(".index-menu li ").css("background", "#F7E463");
        jQuery(".index-menu li ").css("border", "10px solid #000000");
        jQuery(".index-menu li").css("padding", "");
        jQuery(".index-menu .sub-menu").css("border", "0px");
        jQuery(".index-menu .sub-menu li").css("border", "0px");
        jQuery(".index-menu .sub-menu-wrap").css("background", "#F7E463");
        jQuery(".index-menu a").css("color", "#000");
        //content navigation
        jQuery(".main-menu li").css("background", "#F7E463");
        jQuery(".content-navigation ul li").css("border", "3px solid #000");
        jQuery(".sub-menu-wrap ul li").css("border", "none");
        jQuery(".menu-item-389").css("border", "none");
        jQuery("ul li a").css("color", "#000000");
        jQuery(".the-content p").css("color", "#000000");
        jQuery(".the-content h2").css("color", "#000000");
        jQuery(".sub-menu-wrap").css("background", "#F7E463");
        jQuery(".sub-menu-wrap span").css("color", "#000");
        jQuery(".download-module a").css("color", "#000");
        jQuery(".section-title").css("color", "#000");
        jQuery(".section-title").css("border-top", "1px solid #000");
        jQuery("h3").css("color", "#000000");
        //copyright
        jQuery(".copyright ul li").css("border-right", "1px solid #000000");
        jQuery(".footer-logos img").attr("src", "/wp-content/themes/dsn/images/logos-yellow.png");
        jQuery(".wpcf7-form-control.wpcf7-submit").css("background", "none repeat scroll 0 0 #000");
        jQuery(".the-content a").css("color", "#000");
        jQuery(".the-content a").css("text-decoration", "underline");
        jQuery(".title").css("color", "#000");
        jQuery(".default button").css("border", "1px solid #000");
        jQuery(".madeby").css("color", "#000");
    }
});

Answer 2

我建议您如何处理动态主题，而不是硬编码更改：

JSFiddle：http://jsfiddle.net/NLn4a/1/

HTML：

<div id="colour-scheme">
    <p>Colour Scheme 
    <span class="default"><button>default</button></span>
    <span class="white"><button>White</button></span>
    <span class="yellow"><button>Yellow</button></span>
    </p>
</div>

jQuery 只是改变了 body 元素上的一个类

$(function () {
    $('#colour-scheme').on('click', 'button', function () {
        $('body').removeClass('default white yellow').addClass($(this).parent().attr('class'));
    });
});

此代码只是从按钮的父级获取class 并将其添加到body 元素中。

CSS（特定于每个层次结构）：

body.default {
    background-color: black;
    color: white;
}
body.white {
    background-color: white;
    color: blue;
}
body.yellow {
    background-color: yellow;
    color: green;
}

这会将样式维护移到它所属的位置（到样式中）。

Cookie：

您可以在加载时将 cookie 值作为类名恢复到 body 元素中：

例如$('body').addClass(cookieValue);

合起来就是：

$(function () {
    var cookieValue = getMyCookieValueCodeHere;
    $('body').addClass(cookieValue);
    $('#colour-scheme').on('click', 'button', function () {
        $('body').removeClass('default white yellow').addClass($(this).parent().attr('class'));
    });
});

早熟：

您可能希望在页面开始加载后立即在页面上设置主题 class。您可以在页面 head 中使用原始 javascript 来执行此操作（当时 jQuery 尚未准备好）。

<script type="text/javascript>
    // read cookie value with raw javascript
    document.body.className += cookievalue;
</script>

可选的“默认”主题：

您的“默认”主题不需要使用类（例如默认），而只是没有任何 body.class 选择器的任何基本 CSS。即您当前的原始 CSS。