我如何添加和删除类与设置和删除Cookie与Jquery

Question

所有，
我很新，并且我在我的头上。我会尽量保持这个短...

我有2 x 3按钮。 Pleace按照this link to see a picture of them.（我不能张贴图片喷射...）
在图片中上排按钮是：悬停类，标准越低。 所有6个按钮都有一个div，并且有一个css样式（.black1 + .black1：悬停），并按类别与它们耦合。
（HTML）：

<div><a id="black" href="#" class="black1">Black</a></div> 
<div><a id="black_day" href="#" class="gr_light_off"></a></div> 
<div><a id="black_month" href="#" class="re_light_on"></a></div> 
<div><a id="white" href="#" class="red1">White</a></div> 
<div><a id="white_day" href="#" class="gr_light_off"></a></div> 
<div><a id="white_month" href="#" class="re_light_on"></a></div> 

在这个例子中我添加了一个类 “re_light_on” 给按钮 “black_month” 和 “white_month”。这使灯开关打开。 （这个类不应该在我的HTML脚本中，就像你将会看到的那样。）这意味着我已经为'day'和'month'按钮设置了2个类（.._ light_off & .._ light_on），两个类都有自己的悬停-样式。

该计划：
我已经给身体标记一个id“body_bg”。默认情况下，它有一个类“bg_gray”。当有人点击“黑色”按钮时，“body_bg”将删除类“bg_gray”，并加载类“bg_black”。这可以像HTML一样工作：

<a id="black" href="#" onclick="$(body_bg).removeClass('bg_gray bg_white'), 
$(body_bg).addClass('bg_black');"> 

点击按钮“白色”会做相反的事情。 （还有一个按钮“重置默认”）
问题1：如何将上述脚本从我的HTML页面移动到我的外部js页面？ 如果我可以添加到我的js页面，我可以尝试添加一个'cookie.set'和'cookie.del'函数，以便人们可以看到网站的另一部分，身体背景他们选择了。

现在为其他4个按钮。我的这些工作为好，像这样（HTML）：

<a id="black_day" href="#" class="gr_light_off" onclick=" 
$(this).removeClass('gr_light_off'), $(white_day).removeClass(), 
$(this).addClass('gr_light_on'), $(white_day).addClass('gr_light_off');"></a> 

这使得它不可能两个“天” -buttons有在同一时间的光。这个脚本与“white_day”按钮相反，两个“月”按钮也是相同的。
问题2：同样的问题！我如何从我的外部js页面获得这项工作？
我已经尝试了很多，相信我，但我不会说足够好的喷气机飞机，显然。

最后，我希望“黑色”和“白色”按钮为这个浏览会话设置一个cookie，“日” - 为当天剩余时间（主要是为了好玩）和“月“按钮设置一个月的cookie。浏览cookie不应该被删除，但会超出日期和月份的cookie。而一天的cookie应该超过月份的cookie。
以下是我尝试过的许多事情之一。只是让你可以在它拍摄;）

$(document).ready(function() { 
    $("#black_day").click(function() { 
    $(this).removeClass('gr_light_off'); 
    $(this).addClass('gr_light_on'); 
    $(white_day).removeClass(); 
    $(white_day).addClass('gr_light_off'); 
    $.cookie.del("styleday"); 
    $.cookie.set("styleday", "black", { path: '/', expiresAt: 23:59 }); 
    }); 
}); 

最后一个问题：我有第二个计划，而不是2×3，但5×3个按钮指导备用样式表。有没有更简单的方法来做到这一点？

我感谢您的时间和精力。我知道我从我犯的每一个错误中学习，并且每一个答案都可以给我。

Answer 1

我不确定你的问题，但也许这个解决方案将帮助

A1。

$('.black1').live('click', function(){ 
    $('#body_bg').removeClass('bg_gray bg_white').addClass('bg_black'); 
}); 

A2

$('.gr_light_off').live('click', function(){ 
    // remove all gr_light_on class on every button that has gr_light_on class 
    $('.gr_light_on').removeClass('gr_light_on'); 
    // add gr_light_on to this button 
    $(this).removeClass('gr_light_off').addClass('gr_light_on'); 

    // clear then set the cookies 
    $.cookie.del("styleday"); 
    if($(this).is('#black_day')){ 
    $.cookie.set("styleday", "black", { path: '/', expiresAt: 23:59 }); 
    } 
    else if($(this).is('#white_day')){ 
    // set cookie for white style 
    } 
}); 

$('.gr_light_on').live('click', function(){ 
    // opposite with gr_light_off 
}); 

// repeat for re_light_off etc.. 

A3。见A2。