我在点击light-mode
时尝试切换#lights
CSS类,我想将此更改存储到cookie中。下面是我到目前为止所做的,但它要求用户点击两次才能正常工作:
jQuery(document).ready(function($) {
if ($.cookie('light-mode') == "yes") {
$("body").addClass("light-mode");
}
$("#lights").click(function() {
if ($.cookie('light-mode') == "undefined" || $.cookie('light-mode') == "no") {
$.cookie('light-mode', 'yes', {
path: '/'
});
$("body").addClass("light-mode");
} else {
$.cookie('light-mode', 'no', {
path: '/'
});
$("body").removeClass("light-mode");
}
});
});
除非我忽略了一些简单的事情,否则问题可能与我如何使用cookie的逻辑有关。
也许你可以修改你的方法来解耦切换light-mode
类,并将状态持久化到相应的cookie就像这样?
jQuery(document).ready(function($) {
if ($.cookie('light-mode') == "yes") {
$("body").addClass("light-mode");
}
$("#lights").click(function() {
/* Toggle the class regardless of cookie state */
$("body").toggleClass("light-mode");
/* Update cookie value based on current class assignment */
$.cookie('light-mode', $("body").hasClass("light-mode") ? 'yes' : 'no', { path: '/' });
});
});