我通过点击其中一个" 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 });
});
});
答案 0 :(得分:2)
我认为,下一个代码比向每个按钮添加单独的事件要普遍得多。
你的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});
}
}