在一个 cookie 中设置两个值

Question

我通过单击两个“a”链接之一来更改我网站上的对比度，并通过单击三个“a”链接之一来更改字体大小。 我通过在正文中添加/删除新类来更改对比度。

问题：如何在一个cookie中设置当前对比度和字体大小？ 当用户更改子站点时，我还想保存更改... 我正在使用 jquery-1.2.3...

HTML：

<div id="contrast">
<ul>
   <li><a href="#" id="first_contrast" class="con1">a</a></li>
   <li><a href="#" id="second_contrast" class="con2">b</a></li> 
</ul>        
</div>

<div id="font">
<ul>
<li><a href="#" id="one" class="fon1">c</a></li>
<li><a href="#" id="two" class="fon2">d</a></li>
<li><a href="#" id="three" class="fon3">e</a></li>  
</ul>        
</div>

jQuery

$(document).ready(function(){
if($.cookie('f')) {
    $('body').css('font-size', $.cookie('f')); 
}
if($.cookie('t')) {
    $('body').addClass($.cookie('t')); 
}
$('#one').click(function(){
    $('body').css('font-size', '60%');
    $.cookie('f','60%', { path: '/', expires: 10000 });
});
$('#two').click(function(){
    $('body').css('font-size', '72.5%');
    $.cookie('f','72.5%', { path: '/', expires: 10000 });
});
$('#three').click(function(){
    $('body').css('font-size', '85%');
    $.cookie('f','85%', { path: '/', expires: 10000 });
});
$('#first_contrast').click(function(){
    $('body').removeClass('highcon');
    $.cookie('t','main', { path: '/', expires: 10000 });
});
$('#second_contrast').click(function(){
    $('body').addClass('highcon');
    $.cookie('t','highcon', { path: '/', expires: 10000 });     
});
});

Answer 1

我认为，下一个代码比为每个按钮添加单独的事件更通用。

你的 HTML 应该是这样的：

<button data-size="80%" class="font-size">Font-size 80%</button>
<button data-contrast="bright" class="contrast">Contrast bright</button>
<button data-size="90%" class="font-size">Font-size 90%</button>
<button data-contrast="low" class="contrast">Contrast low</button>

Javascript 代码：

 // check for existing cookie on page load
 setCookieString();

    $('.font-size').on('click', function(){
        var fontSize = $(this).data('size');

        $('body').css('font-size', fontSize);
        setCookieString(fontSize);

    });

    $('.contrast').on('click', function(){
        var contrastLevel = $(this).data('contrast');

        $('body').addClass(contrastLevel);
        setCookieString(contrastLevel, 1);
    });

    function setCookieString(newVal, valueNumInCookie) {
        var cookie = $.cookie('siteSettings') || '';
        var cookieArr = cookie.split(';');

        // if there is no arguments then we need to get values from existing cookie.
        // Otherwise need to set new values
        if(!arguments.length) {
            $('body').css('font-size', cookieArr[0]);
            $('body').addClass(cookieArr[1]);
        }
        else {
            cookieArr[valueNumInCookie || 0] = newVal;

            $.cookie('siteSettings', cookieArr.join(';'), { path: '/', expires: 10000});
        }
    }