ansaurus

Question

How to remove existing class name and add a new one with jQuery and Cookies?

Answer 1

+7 A:

$('.red').removeClass('red').addClass('blue');

here's the full working code

$(function() {
    $("a").click(function() {
        var color = $(this).text();
        $("body").removeClass().addClass(color);
        return false;
    });


});

And now for the cookie part

$(function() {
    $("a").click(function() {
        var color = $(this).text();
        $("body").removeClass().addClass(color);
        createCookie("color",color);
        return false;
    });

    if (readCookie("color") != null) {
      $("body").removeClass().addClass(readCookie("color"));

    }
    else {
      $("body").removeClass().addClass("red");
    }

});

function createCookie(name,value,days) {
if (days) {
 var date = new Date();
 date.setTime(date.getTime()+(days*24*60*60*1000));
 var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
 var c = ca[i];
 while (c.charAt(0)==' ') c = c.substring(1,c.length);
 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

Working example here. A thank you to QuirksMode for the pre-made cookie code (cookie-cutter cookie code?)

Russ Cam 2009-04-29 22:41:02

i tried that but since the cookie value will replace that class name its not working.

kakkalo 2009-04-29 22:43:29

thank you very much. this works perfectly.now for the cookie part. is there any other way to save without cookie plugin

kakkalo 2009-04-29 22:59:24

you are simply the best. thank you very much.

kakkalo 2009-04-29 23:17:52

Answer 2

+1 A:

You'll also need removeClass.

Hank Gay 2009-04-29 22:41:36

Answer 3

+1 A:

The two upvoted methods will work a treat. For cookies you'll can also use the jQuery cookie plugin

you should be able to follow the examples on how to set and read the cookie for your needs

Phil Carter 2009-04-29 22:48:04

You don't "need" a plugin. Please change your wording. Cookies can be manipulated without jQuery or one of its plugins.

J-P 2009-04-29 22:49:33

Answer 4

+1 A:

Without jQuery you can do this with a line as simple as:

document.getElementsByTagName("body")[0].className = "red";

This effectively removes the class assigned to the element and replace it with whatever you want.

For cookies, PPK has a few simple methods to read/write/erase cookies.

createCookie("mySiteCookie", "red", 7); // Set the cookie to expire in 7 days.
readCookie("mySiteCookie"); // Should yield "red"

Zack Mulgrew 2009-04-29 23:28:16

ansaurus

tags:

views:

answers:

How to remove existing class name and add a new one with jQuery and Cookies?

related questions