Comment supprimer un nom de classe existant et en ajouter un nouveau avec jQuery et les cookies?

StackOverflow https://stackoverflow.com/questions/804584

Question

Comment pouvez-vous supprimer un nom de classe et le remplacer par un nouveau? 

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

Dans ce cas, lorsque vous cliquez sur le rouge, le vert ou le bleu, le nom de la classe de corps change en conséquence. En outre, il créera un cookie qui enregistrera le choix.

J'ai essayé jQuery .addClass et cela fonctionne, mais cela ajoute une classe à celle existante. De plus, je ne parviens pas à enregistrer le cookie.

Était-ce utile?

La solution

Utiliser: 

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

Voici le code de travail complet : 

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

Et maintenant pour la partie 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);
}

Exemple de travail ici . Merci à QuirksMode pour le code de cookie prédéfini (code de cookie de taille cookie) ?)

Autres conseils

Sans jQuery, vous pouvez le faire avec une ligne aussi simple que: 

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

Ceci supprime efficacement la classe assignée à l'élément et le remplace par ce que vous voulez.

Pour les cookies, PPK utilise quelques méthodes simples pour lire / écrire / effacer les cookies . 

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

Vous aurez également besoin de removeClass .

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top