我如何添加和刪除類與設置和刪除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。