brunoww22 | 2021-02-17 10:25:20 UTC | #1
Cześć :wave:
Jak mogę zapisać te zmiany poprzez jQuery cookies?
jQuery(document).ready(function() {
jQuery('#customSwitch1').change(function() {
if ($(this).prop('checked'))
{
$('body').addClass('elegant-color');
$('body').removeClass('morpheus-den-gradient');
}
else
{
$('body').removeClass('elegant-color');
$('body').addClass('morpheus-den-gradient');
}
});
});
To rozwiązanie (poniżej) nie działa, czyli wnioskuję, że jest niepoprawne, albo coś robię nie tak.
Cookies.set("bodyclass", "bg_save");
jQuery(document).ready(function() {
jQuery('#customSwitch1').change(function() {
if ($(this).prop('checked'))
{
$('body').addClass('elegant-color');
$('body').removeClass('morpheus-den-gradient');
}
else
{
$('body').removeClass('elegant-color');
$('body').addClass('morpheus-den-gradient');
$("body").addClass(Cookies.get("bodyclass"));
}
});
});
jQuery mam podpięte, przed js-cookie.
Nieznajomy11 | 2020-10-05 03:56:44 UTC | #2
Jeśli chcesz zapisać rodzaj tła, musiałbyś w ciastku zapisywać, jaki to i przy ładowaniu się strony sprawdzać właśnie stan tego ciastka. Obecnie jedynie zapisujesz stały ciąg znaków i dalej go i tak ignorujesz.
brunoww22 | 2020-10-05 03:58:39 UTC | #3
Dziękuję za naprowadzenie.
brunoww22 | 2020-10-05 04:06:31 UTC | #4
Prosiłbym jednak o więcej wskazówek, jeśli chodzi o kod, gdyż zaczynam dopiero z jQuery, a tym bardziej z cookies.
Wright | 2020-10-05 04:35:16 UTC | #5
jQuery(document).ready(function() {
if (!Cookie.get("bodyclass")) {
Cookies.set("bodyclass", "bg_save");
}
$("body").addClass(Cookies.get("bodyclass"));
jQuery('#customSwitch1').change(function() {
if ($(this).prop('checked'))
{
Cookies.set("bodyclass", "elegant-color");
$('body').addClass('elegant-color');
$('body').removeClass('morpheus-den-gradient');
}
else
{
Cookies.set("bodyclass", "morpheus-den-gradient");
$('body').removeClass('elegant-color');
$('body').addClass('morpheus-den-gradient');
}
});
});
brunoww22 | 2020-10-05 07:19:02 UTC | #6
Cookie is not defined, tutaj if (!Cookie.get("bodyclass")) {
A jest zdefiniowane powyżej w taki sposób Cookies.set("bodyclass", "bg_save");
Nieznajomy11 | 2020-10-05 16:26:32 UTC | #7
To literówka, powinno być po prostu Cookies zamiast Cookie. Dodatkowo uważam, że całość kodu nie spełnia założeń, bo poza zapisywaniem, które jest, brakuje tam ładowania. Sam fragment z pierwszym ifem jest też do zakwestionowania, po co się on tam znajduje, chyba że czegoś nie rozumiem.
Wright | 2020-10-05 16:38:51 UTC | #8
[quote=”Nieznajomy11, post:7, topic:16306”]
ifem jest też do zakwestionowania, po co się on tam znajduje
[/quote]
Jeśli ktoś przykładowo wejdzie pierwszy raz na strone i nie bedzie miał tego ciasteczka to:
$("body").addClass(Cookies.get("bodyclass"));
Wypluje undefined
Nieznajomy11 | 2020-10-05 19:53:49 UTC | #9
Pomijając, że addClass zwyczajnie ignoruje wtedy undefined, przynajmniej w wersji jquery której używam, w takim razie czemu po prostu nie zrobić:
if (Cookies.get("bodyclass") !== undefined) {
$("body").addClass(Cookies.get("bodyclass"));
}
Lub nawet lepiej:
var bodyClassCookie = Cookies.get("bodyclass");
if (bodyClassCookie !== undefined) {
$("body").addClass(bodyClassCookie);
}
Ustawianie ciasteczka tylko dlatego, że ktoś nie wybrał koloru strony, wydaje się bardzo zbędne.
brunoww22 | 2020-10-05 18:08:50 UTC | #10
Zrobiłem tak jak napisałeś i wciąż ustawia ciasteczko jeśli nie wybiorę koloru strony.
Cookies.set("bodyclass", "bg_save");
jQuery(document).ready(function() {
var bodyClassCookie = Cookies.get("bodyclass");
if (bodyClassCookie !== undefined) {
$("body").addClass(bodyClassCookie);
}
$("body").addClass(Cookies.get("bodyclass"));
jQuery('#customSwitch1').change(function() {
if ($(this).prop('checked'))
{
Cookies.set("bodyclass", "elegant-color");
$('body').addClass('elegant-color');
$('body').removeClass('morpheus-den-gradient');
}
else
{
Cookies.set("bodyclass", "morpheus-den-gradient");
$('body').removeClass('elegant-color');
$('body').addClass('morpheus-den-gradient');
}
});
});
I jak bylibyście na tyle uprzejmi, aby mi powiedzieć jak wczytać teraz po załadowaniu strony zapisane ciasteczko, będę dozgonnie wdzięczny :)
brunoww22 | 2020-10-05 19:54:54 UTC | #11
Za duzo dzisiaj w kodzie i już nie myśle, przeciez na samej górze ustawiałem ciastko, usunąłem tę linikję wszystko ładnie działa dziękuje za pomoc.
Edit: Jeszcze jeden mały problem, jak mogę zapisać stan checkboxa? Metodą prób i błędów nie udało mi się do tego dojść.
Nieznajomy11 | 2020-10-12 16:27:24 UTC | #12
Musisz przy ładowaniu strony sprawdzać, jakie jest ciastko (w tym pierwszym ifie) i zmienić stan checkboxa “ręcznie”, np. tak:
if (bodyClassCookie === "elegant-color") {
$('#customSwitch1').prop('checked', true);
}
Generalnie sporo można by poprawić. Między innymi zapisywać na górze w funkcji ready rozwiązania elementów pobieranych przez $/jQuery i potem wykorzystywać już zmienne:
$body = $("body");
$customSwitch = $("#customSwitch1");
I wtedy w ten sposób (nie, to nie jest działający kod, tylko fragmenty):
$customSwitch.change(...)
$body.addClass/removeClass(...)
Jeszcze prawie czysto estetycznie, to też zdecydować się i używać albo jQuery(…) (lepsza kompatybilność) albo bardziej popularnego $(…). Mieszanie w teorii działa, ale nie wygląda najlepiej.
brunoww22 | 2020-10-06 12:41:26 UTC | #13
Dzięki, jak będę miał chwilę to zrobię tak jak mówisz. I dam znać czy wyszło oraz dziala tak jak chcę.
Edit:
Dziękuje bardzo, wszystko ładnie śmiga.
I mam jeszcze ostatnie pytanie. W jaki sposób mógłbym zapisać w ciastku więcej klas? Nie robiąc tak jak poniżej.
Edit2: poprawa kodu
Edit3: kolejna poprawa kodu
$(document).ready(function() {
$body = $("body");
$card = $(".card");
$customSwitch = $("#customSwitch1");
var bodyClassCookie = Cookies.get("bodyclass");
var cardClassCookie = Cookies.get("cardclass");
if (bodyClassCookie && cardClassCookie !== undefined) {
$body.addClass(bodyClassCookie);
$card.addClass(cardClassCookie);
}
if (bodyClassCookie === "elegant-color" || bodyClassCookie === undefined) {
$customSwitch.prop('checked', true);
}
else
{
$customSwitch.prop('checked', false);
}
$body.addClass(Cookies.get("bodyclass"));
$card.addClass(Cookies.get("cardclass"));
$customSwitch.change(function() {
if ($(this).prop('checked'))
{
Cookies.set("bodyclass", "elegant-color");
Cookies.set("cardclass", "grey darken-4");
$body.removeClass('morpheus-den-gradient');
$body.addClass('elegant-color');
$card.removeClass('winter-neva-gradient');
$card.addClass('grey darken-4');
}
else
{
Cookies.set("bodyclass", "morpheus-den-gradient");
Cookies.set("cardclass", "winter-neva-gradient");
$body.removeClass('elegant-color');
$body.addClass('morpheus-den-gradient');
$card.removeClass('grey darken-4');
$card.addClass('winter-neva-gradient');
}
});
});
brunoww22 | 2020-10-07 17:33:23 UTC | #14
Odświeżam
Wright | 2020-10-07 20:36:13 UTC | #15
Zapisuj sobie w ciasteczku np. “customStyle” => “dark”, potem zrób ifa, który sprawdza wartość w ciasteczku i jak jest np. “dark” to dodaje do cardów/navów/body jakaś tam klasę
system | 2021-02-17 10:31:44 UTC | #16
Ten temat został automatycznie zamknięty 32 dni po ostatnim wpisie. Tworzenie nowych odpowiedzi nie jest już możliwe.