クラスを追加して削除する方法と、JqueryでCookieを設定して削除する方法を

Question

Hallo all、
私はかなり新しいです。私はこれを短くしておきます...

私は2 x 3のボタンを持っています。 Pleaceは、ピクチャ内this link to see a picture of them.（Iピクチャがジェットを投稿することができない...）
ボタンの上段に従っている：ホバークラス、低い標準。 6つのボタンにはdivがあり、クラスごとにCSSスタイル（.black1 + .black1：hover）があります。
（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> 

私はボタンに "black_month" と "white_monthを" クラス "re_light_on" を追加しました。これにより、ライトがオンになります。 （このクラスは私のHTMLスクリプトには表示されないはずです）これは、 'day'と 'month'ボタンの2つのクラス（.._ light_off & .. light_on）を設定したことを意味します。 -スタイル。

計画：
私はbody-tagにid "body_bg"を与えました。デフォルトでは、このクラスには "bg_gray"というクラスがあります。誰かが "Black"ボタンをクリックすると、 "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（「デフォルトにリセット」ボタンもあります）：は、どのように私は私の外部JS-ページに私のHTMLページから上記のスクリプトを移動するのですか？ これを私のjsページに追加することができれば、私は 'cookie.set'と 'cookie.del'関数を追加して、人々がサイトの別の部分を見ることができるようにすることができます。彼らは選んだ。

他の4つのボタンになりました。私はこれらので（HTML）のように、同様に働いてきた：両方の「日」-buttonsが同時に上の光を持っている。これは、それが不可能

<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> 

。このスクリプトは、 "white_day"ボタンの反対で、両方の "月"ボタンと同じです。
質問2：同じ質問！私の外部のjsページからこれをどのように動作させるのですか？
私は多くを試してみました、私を信じてください、しかし、私はかなりよく十分なジェット機、JavaScriptを話すことはありません。

最終的には、このブラウジングセッションでは「黒」と「白」のボタンにクッキーを設定したいと考えています。その日の残りの部分（主に楽しいもの）には「日」 - 1ヶ月間クッキーを設定します。ブラウズクッキーは削除してはならず、曜日と月のクッキーを上回るべきではありません。そして、その日のクッキーは月のクッキーを上回るはずです。
以下は、私が試した多くのことの1つです。私がいない2×3と第二の計画を持っていますが、5×3のボタンは、代替スタイルシートを向ける：）

$(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 }); 
    }); 
}); 

最後の質問を、ちょうどので、あなたはそれを撮影することができます。このすべてをやるより簡単な方法はありますか？

あなたの時間と努力に感謝します。私はすべての間違いや、あなたが私に与えることができるすべての答えから学ぶことを知っています。

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を参照してください。