jQuery cookies

Pytania i problemy

brunoww22 Pionier

Cześć 👋

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 Moderator forum.lvlup.pro

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 Pionier

Dziękuję za naprowadzenie.

brunoww22 Pionier

Prosiłbym jednak o więcej wskazówek, jeśli chodzi o kod, gdyż zaczynam dopiero z jQuery, a tym bardziej z cookies.

Wright

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 Pionier

Cookie is not defined, tutaj if (!Cookie.get("bodyclass")) {

A jest zdefiniowane powyżej w taki sposób Cookies.set("bodyclass", "bg_save");

Nieznajomy11 Moderator forum.lvlup.pro

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

Nieznajomy11:

ifem jest też do zakwestionowania, po co się on tam znajduje

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 Moderator forum.lvlup.pro

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 Pionier

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 Pionier

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 Moderator forum.lvlup.pro

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 Pionier

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 Pionier

Odświeżam

Wright

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

Ten temat został automatycznie zamknięty 32 dni po ostatnim wpisie. Tworzenie nowych odpowiedzi nie jest już możliwe.