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


hallo all,
i'm quite new , i'm in way on head. i'll try keep short...

i have 2 x 3 buttons. pleace follow this link see picture of them. (i can't post pictures jet...)
in picture upper row of buttons :hover class, lower standard. 6 buttons have div , have css style (.black1 + .black1:hover) coupled them 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 example have added class "re_light_on" buttons "black_month" , "white_month". makes light switch on. (this class should never in html script, see.) means have set 2 classes (.._light_off & .._light_on) 'day' , 'month' buttons, both own hover-style.

the plan:
have given body-tag id "body_bg". default has class "bg_gray". when clicks button "black" "body_bg" gets class "bg_gray" removed , class "bg_black" loaded. works (html):

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

clicking on button "white" opposite. (there's button "reset default")
question 1: how move above script html page external js-page? if can add js-page, can try add 'cookie.set' , 'cookie.del' function this, people can see part of site, body-background selected.

now other 4 buttons. have these working well, (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 impossible both "day"-buttons have light on @ same time. script opposite "white_day"-button , same go's both "month" buttons.
question 2: same question! how working exteral js-page?
have tryed lot, believe me, don't speak javascript quite enough jet, apparently.

eventually have "black" , "white" buttons set cookie browsing-session, "day"-buttons cookie remainder of day (mostly fun) , "month"-button set cookie month. browse cookie should not remove, outrank day- , month cookie. , day cookie should outrank month cookie.
following 1 of many things i've tryed. can shoot @ ;)

$(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: have second plan not 2 x 3, 5 x 3 buttons directing alternate stylesheets. there easier way this???

i thank time , effort. know learn every mistake make , every answer can give me.

i'm not sure question, maybe solution help

a1.

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

a2

$('.gr_light_off').live('click', function(){   // remove gr_light_on class on every button has gr_light_on class   $('.gr_light_on').removeclass('gr_light_on');   // add gr_light_on button   $(this).removeclass('gr_light_off').addclass('gr_light_on');    // clear set 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 white style   } });  $('.gr_light_on').live('click', function(){   // opposite gr_light_off });  // repeat re_light_off etc.. 

a3. see a2.


Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -