切换样式表并记住使用jquery.cookie.js选择的样式表

可能之前已经有人问过了，但我仍然没有找到任何有用或完整的答案。我们如何切换样式表并保存使用jQuery cookie选择的样式表？所以我在同一个文件夹中有5个样式表，下面的jQuery代码会自动创建一个select元素。我可以在样式表之间切换，但我不知道如何保存已选择的样式表。谢谢

<link href="styles/black.css" rel="stylesheet" type="text/css" title="black">
<link href="styles/blue.css" rel="stylesheet" type="text/css" title="blue">
<link href="styles/green.css" rel="stylesheet" type="text/css" title="green">
<link href="styles/red.css" rel="stylesheet" type="text/css" title="red">
<link href="styles/yellow.css" rel="stylesheet" type="text/css" title="yellow">

jQuery代码：

<script type="text/javascript">
    (function($)
    {
        var $links = $('link[rel*=alternate][title]');
        $('#sw').prepend('<div id="toolbar"><select id="css-selector"></select></div>');
        var options= '<option value="">Select color:</option>';
        $links.each(function(index,value){
        options +='<option value="'+$(this).attr('href')+'">'+$(this).attr('title')+'</option>';
        });
    $links.remove();
    $('#css-selector').append(options)
    .bind('change',function(){
        $('link[rel*=jquery]').remove();
        $('head').append('<link rel="stylesheet jquery" href="'+$(this).val()+'" type="text/css" />');
    });
    }
    )(jQuery); 
    </script>

（函数（$）
{
var$links=$（'link[rel*=alternate][title]）；
$（'#sw'）。前置（''）；
变量选项='选择颜色：'；
$links.each（函数（索引、值）{
选项+=''+$（this.attr（'title'）+''；
});
$links.remove（）；
$（'#css选择器'）。附加（选项）
.bind（'change'，function（））{
$（'link[rel*=jquery]'）。删除（）；
$（'head'）。追加（''）；
});
}
)（jQuery）；

按照以下步骤根据用户cookie创建自定义布局：-

创建一个读取cookie并更改default.css的函数

函数readiecss（）{
if（$.cookie（'styleSheet'）==null | |$.cookie（'styleSheet'）==undefined）{
/*无所事事*/
}
否则{
$（'link[href=“default.css”]）.attr（'href'，$.cookie（'styleSheet'）；
}
}

更改样式表并将css文件名保存在cookie中

函数saveCSSinCookie（CSS文件名）{
if（$.cookie（'styleSheet'）==null | |$.cookie（'styleSheet'）==undefined）{
$.cookie（“样式表”，CSS_文件名，{expires:365}）；//1年后过期
$（'link[href=“default.css”]）.attr（'href'，$.cookie（'styleSheet'）；
}
否则{
$（'link[href=“'+$.cookie（“样式表”）+'“]'）.attr（'href'，CSS_文件名）；
$.cookie（'样式表'，CSS\u文件\u名称）；
}
}

这些函数背后的基本思想是，如果cookie存在，则样式表由用户保存，否则样式表为default.css（在您的情况下，它可以是上述样式表中的任何一个）

因此，每当需要更改样式时，必须在页面加载本身和第二个函数上调用readCookieCSS（）

如果您想了解更多关于样式表更改和Jquery Cookie的信息，请查看以下答案：-

在代码中调用函数：-

加载页面时添加readCookieCSS（）：-

$（document）.ready（函数（）{readCookieCSS（）；}）

添加saveCSSinCookie（CSS_FILE_NAME）是在您通过更新当前绑定函数来更改样式表时调用的，如下所示：-

.bind（'change'，function（）{saveCSSinCookie（$（this.val（））；}）

更新了Javascript，因为我正在Javascript数组中存储不同的css值和标题

$links

code:-

function readCookieCSS() {
    if ($.cookie('styleSheet') === null || $.cookie('styleSheet') == undefined) { /*Do nothing*/
    } else {
        $('link[href="default.css"]').attr('href', $.cookie('styleSheet'));
    }
}
function saveCSSinCookie(CSS_FILE_NAME) {
    if ($.cookie('styleSheet') === null || $.cookie('styleSheet') == undefined) {
        $.cookie("styleSheet", CSS_FILE_NAME, { expires : 365 });//expires after 1 year
        $('link[href="default.css"]').attr('href', $.cookie('styleSheet'));
    } else {
        $('link[href="' + $.cookie("styleSheet") + '"]').attr('href', CSS_FILE_NAME);
        $.cookie('styleSheet', CSS_FILE_NAME);
    }
}
$(document).ready(function()
{
    readCookieCSS();/*reading cookie on page load*/
    var $links = [{'style':'style/black.css','title':'black'}, {'style':'style/blue.css','title':'blue'}, {'style':'style/green.css','title':'green'}, {'style':'style/red.css','title':'red'},{'style':'style/yellow.css','title':'yellow'}];
    $('#sw').append('<div id="toolbar"><select id="css-selector"></select></div>');
    var options= '<option value="style/default.css">Select color:</option>';
    $links.map(function(value,index){
    options +='<option value="'+value.style+'">'+value.title+'</option>';
    });
    $('#css-selector').append(options)
    .bind('change',function(){
     saveCSSinCookie($(this).val());
});
}
); 

函数readiecss（）{
如果（$.cookie（'styleSheet'）==null | |$.cookie（'styleSheet'）==undefined）{/*什么也不做*/
}否则{
$（'link[href=“default.css”]）.attr（'href'，$.cookie（'styleSheet'）；
}
}
函数saveCSSinCookie（CSS\u文件\u名称）{
if（$.cookie（'styleSheet'）==null | |$.cookie（'styleSheet'）==undefined）{
$.cookie（“样式表”，CSS_文件名，{expires:365}）；//1年后过期
$（'link[href=“default.css”]）.attr（'href'，$.cookie（'styleSheet'）；
}否则{
$（'link[href=“'+$.cookie（“样式表”）+'“]'）.attr（'href'，CSS_文件名）；
$.cookie（'样式表'，CSS\u文件\u名称）；
}
}
$（文档）.ready（函数（）
{
readCookieCSS（）；/*在页面加载时读取cookie*/
var$links=[{'style'：'style/black.css'，'title'：'black'}，{'style'：'style/blue.css'，'title'：'blue'}，{'style'：'style/green.css'，'title'：'green'}，{'style'：'style/red.css'，'title'：'red'}，{'style'：'yellow.css'，'title'：'yellow'}；
$（'#sw'）。附加（''）；
变量选项='选择颜色：'；
$links.map（函数（值、索引）{
选项+=''+值。标题+''；
});
$（'#css选择器'）。附加（选项）
.bind（'change'，function（））{
saveCSSinCookie（$（this.val（））；
});
}
); 

第一次为用户使用默认样式表，而不是相应地更改样式表 更新的CSS:

<link href="default.css" rel="stylesheet" type="text/css" title="black">

---

谢谢您的帮助，但我无法让它正常工作。由于jquery cookie插件已经包含在我的文件中，我在我的jquery示例之后添加了您的两段代码，并编辑了您示例中的default.css名称，但没有结果。我做错了什么？谢谢。您已经正确定义了这些函数，但是您没有调用这些函数。第一个函数

readCookieCSS（）

将被调用

$（document）.ready（函数（{…}）；

。第二个函数

saveCSSinCookie（CSS\u文件名）

在您更改样式表时将被调用。请建议您如何更改样式表，以便向其中添加第二个函数。抱歉，我不明白“建议您如何更改样式表”是什么意思。我的样式表是通过jquery代码更改的（选择框是通过该代码生成的）。我知道了，您正在使用“#css选择器”中的更改事件来更新/更改样式表。我已经更新了代码并声明了您必须调用函数的位置，请尝试一下。：）我迷路了：）。请将您的所有代码（如果我不要求太多的话）包括我的所有代码一起放在JSFIDLE上。我必须说，我是jquery的新手。再次感谢。