Come rimuovo un nome di classe esistente e ne aggiungo uno nuovo con jQuery e i cookie?
-
03-07-2019 - |
Domanda
Come puoi rimuovere un nome di classe e sostituirlo con uno nuovo?
<style>
.red {background-color: #FF0000;}
.green{background-color: #00FF00;}
.blue {background-color: #0000FF;}
</style>
<body class="red">
<ul>
<li><a href="">red</a></li>
<li><a href="">green</a></li>
<li><a href="">blue</a></li>
</ul>
</body>
In questo caso, quando si fa clic su rosso, verde o blu, il nome della classe del corpo cambierà di conseguenza. Inoltre creerà un cookie che salverà la scelta.
Ho provato jQuery .addClass e funziona, ma sta aggiungendo una classe in aggiunta a quella esistente. Inoltre non riesco a salvare il cookie.
Soluzione
Usa:
$('.red').removeClass('red').addClass('blue');
Ecco il codice di lavoro completo :
$(function() {
$("a").click(function() {
var color = $(this).text();
$("body").removeClass().addClass(color);
return false;
});
});
E ora per la parte cookie
$(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);
}
Esempio di lavoro qui . Un ringraziamento a QuirksMode per il codice cookie pre-creato (codice cookie cookie-cutter ?)
Altri suggerimenti
Senza jQuery puoi farlo con una linea semplice come:
document.getElementsByTagName("body")[0].className = "red";
Questo rimuove efficacemente la classe assegnata all'elemento e lo sostituisce con quello che vuoi.
Per i cookie, PPK ha alcuni semplici metodi per leggere / scrivere / cancellare i cookie .
createCookie("mySiteCookie", "red", 7); // Set the cookie to expire in 7 days.
readCookie("mySiteCookie"); // Should yield "red"
Dovrai anche removeClass .