How can I add AND remove a classes coupled with setting AND removing cookies with Jquery

Hallo all,

I'm quite new to this and I'm in way over my head. I'll try to keep this short...

I have 2 x 3 buttons. Pleace follow this link to see a picture of them. (I can't post pictures jet...)

In the picture the upper row of buttons are the :hover class, the lower the standard. All 6 buttons have a div and have a css style (.black1 + .black1:hover) coupled with them by class.

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

In this example I have added a class "re_light_on" to buttons "black_month" and "white_month". This makes the light switch on. (This class should never be in my HTML script, as you will see.) This means that I have set 2 classes (.._light_off & .._light_on) for the 'day' and 'month' buttons, both with their own hover-style.

The plan:

I have given the body-tag an id "body_bg". By default this has a class "bg_gray". When someone clicks the button "Black" the "body_bg" gets class "bg_gray" removed and the class "bg_black" is loaded. This works like so (HTML):

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

Clicking on the button "White" does the opposite. (There's also a button "reset default")

Question 1: How do I move the above script from my HTML page to my external js-page? If I can add this to my js-page, I can try to add a 'cookie.set' and a 'cookie.del' function to this, so that people can see another part of the site, with the body-background they selected.

Now for the other 4 buttons. I have these working as well, like so (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>

This makes it impossible for both "day"-buttons to have the light on at the same time. This script is the opposite for the "white_day"-button and the same go's for both "month" buttons.

Question 2: Same question! How do I get this working from my exteral js-page?

I have tryed a lot, believe me, but I don't speak javascript quite well enough jet, apparently.

Eventually I would like to have the "black" and "white" buttons set a cookie for this browsing-session, the "day"-buttons a cookie for the remainder of that day (mostly for fun) and the "month"-button set a cookie for a month. The browse cookie should not remove, but outrank the day- and the month cookie. And the day cookie should outrank the m开发者_运维问答onth cookie.

The following is one of the many things I've tryed. Just so you can shoot at it ;)

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

Final Question: I have a second plan with not 2 x 3, but 5 x 3 buttons directing alternate stylesheets. Is there an easier way to do all this???

I thank you for your time and effort. I know I learn from every mistake I make and every answer you can give me.

---

I'm not sure with your question, but maybe this solution will help

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. see A2.