下午并提前感谢那些想要参与其中的人。
我有一位客户稍微改变了他们的要求，现在希望在他们的网站上添加一些内容。
我使用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，以便当用户单击该按钮时，他们可以返回具有正确颜色方案活动的站点。
答案 0 :(得分：0)
虽然为了补救你关于点击和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");
}
});
答案 1 :(得分：0)
这里我建议你如何处理动态主题，而不是硬编码变化：
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>
$(function () {
$('#colour-scheme').on('click', 'button', function () {
$('body').removeClass('default white yellow').addClass($(this).parent().attr('class'));
});
});
此代码只接受按钮父级的class，并将其添加到body元素。
body.default {
background-color: black;
color: white;
}
body.white {
background-color: white;
color: blue;
}
body.yellow {
background-color: yellow;
color: green;
}
这会将样式维护移动到它所属的位置（转换为样式）。
您可以将Cookie值作为类名恢复到加载时的body元素：
e.g。 $('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>
您的＆＃34;默认＆＃34; theme不需要使用类（例如默认值），但只是没有任何body.class选择器的任何基本CSS。即你当前的原创CSS。