Wie kann ich einen bestehenden Klassennamen entfernen und einen neuen mit jQuery und Cookies hinzufügen?

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

Frage

Wie kann man einen Klassennamen entfernen und durch einen neuen ersetzt werden? 

<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 diesem Fall, wenn Sie auf rot klicken oder grün oder blau, werden die Körper Klassennamen entsprechend ändern. Auch wird es ein Cookie machen, die die Wahl sparen.

habe ich versucht, die jQuery .addClass und es funktioniert, aber es ist eine Klasse auf dem bestehenden hinzugefügt wird. Ich kann auch nicht verwalten, das Cookie zu speichern.

War es hilfreich?

Lösung

Verwendung: 

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

Hier ist der volle Arbeits Code : 

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

Und jetzt für das Cookie Teil 

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

Arbeitsbeispiel hier . Ein Dankeschön an Quirksmode für den vorgefertigten Cookie-Code (Cookie-Cutter Cookie Code ?)

Andere Tipps

Ohne jQuery Sie können dies tun, mit einer Linie so einfach wie: 

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

Dies entfernt effektiv die Klasse mit dem Element zugeordnet und ersetzen Sie es mit dem, was Sie wollen.

Für Cookies, PPK hat ein paar einfache Methoden, um Lese- / Schreib / Lösch-Cookies . 

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

Sie werden auch brauchen removeClass .

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top