Question

我需要帮助才能在这里添加cookie，我尝试但不能，不知道如何添加...任何帮助？

$(document).ready(function(){ 
    $("li.black_c").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
    });

    $("li.blue_c").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
    });

    $("li.red_c").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
    }); 

});

以下是工作演示http://jsfiddle.net/jhMfw/，但没有Cookie

Answer 1

对于一个非常简单的用法，我建议您使用jQuery cookie plugin和tutorial here来了解如何使用它。

示范：http://jsfiddle.net/jhMfw/2/

$(document).ready(function(){

    $("li.black_c").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
        $.cookie('mycookie','bg1');
    });

    $("li.blue_c").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
        $.cookie('mycookie','bg2');
    });

    $("li.red_c").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
        $.cookie('mycookie','bg3');
    }); 

    if ($.cookie('mycookie')) {
        $('.main').addClass($.cookie('mycookie'));
    }

});

Answer 2

您应该使用jQuery.cookie()

$.cookie('bckground-color', 'bg1');//set a cookie
$.cookie('bckground-color');//retrieve a cookie

$(document).ready(function(){ 
    var startClass = $.cookie('bckGround');
    $(".main").addClass(startClass);
    $("li.black_c").click( function(){ $
        (".main").removeClass('bg2 , bg3').addClass("bg1");
         $.cookie('bckGround', 'bg1');
    });

    $("li.blue_c").click( function(){ $
        (".main").removeClass("bg1 , bg3").addClass("bg2");
         $.cookie('bckGround', 'bg2');
    });

    $("li.red_c").click( function(){ $
        (".main").removeClass("bg1 , bg2").addClass("bg3");
         $.cookie('bckGround', 'bg3');
    }); 

});

Answer 3

更好地创建主题css，单击按钮即可替换。

CSS

black.css

.button {
    background-color: black;
}

blue.css

.button {
    background-color: blue;
}

red.css

.button {
    background-color: red;
}

在你的html文件的头部，你将添加一个像这样的脚本标签

<link rel="stylesheet" type="text/css" href="css/black.css" name="branded"/>

和你的javascript：

var cookieName = 'current-branding';

function changeBranding(branding) {
    $.cookie(cookieName, branding);
    $('head link[name=branded]').attr('href', 'css/' + branding + '.css');

}

$(document).ready(function(){ 
    if( $.cookie(cookieName)) {
        changeBranding($.cookie(cookieName));
    }

    $("li.black_c").click( function(){ $
       changeBranding('black');
    });

    $("li.blue_c").click( function(){ $
       changeBranding('blue');
    });

    $("li.red_c").click( function(){ $
       changeBranding('red');
    }); 

});

彩色页面切换器与jQuery和cookie

3 个答案: