JS/JQuery - przycisk do zmiany języka i możliwe rozwiązanie

Question

Witam,

Mam następujący problem:
Na swojej stronie zrobiłem osobne paragrafy w divie, jedne mają klasę "pl" i zawierają treść w języku polskim, drugie o klasie "eng" zawierają treść po angielsku. Domyślnie przy ładowaniu strony treść angielska otrzymuje klasę "hidden" z "display:none" tym samym widoczna na stronie jest treść po polsku. Na stronie znajdują się dwa przyciski, jeden do zmiany na angielski, drugi na polski. Wiadomo- po kliknięciu w przycisk od j. ang klasa z display:none zostaje zdjęta i przypisana do paragrafów z klasą "pl".
Moja strona posiada podstrony html. W przypadku zmiany języka oraz przejściu do innej podstrony język wyświetlany znów wraca do domyślnego.
Jak to rozwiązać, aby raz zmieniony język na index.html był zapamiętany na podstronach i wracał dopiero po ponownej zmianie języka wyświetlania?

Z góry dzięki :)

Answer 1

Zapisuj język w localStorage albo w Cookies.

Comments

Ale wtedy muszę usunąć nadawanie klasy z display:none domyślnie po załadowaniu strony?

Answer 2

<div id="change_language_to_other">CHANGE</div>
<div id="languagePL" style="display:none">Jestem</div>
<div id="languageEN">I am</div>

var change_language_to_other = document.getElementById('change_language_to_other');
var languagePL = document.getElementById('languagePL');
var languageEN = document.getElementById('languageEN');

function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}
// source: https://stackoverflow.com/questions/10730362/get-cookie-by-name

if(getCookie('language')=='EN'){
	languagePL.style.display = 'none';
	languageEN.style.display = 'block';
}else{ 
	languagePL.style.display = 'block';
	languageEN.style.display = 'none';
}

function change_language(){ 
 	if(languagePL.style.display == 'none'){
		 languagePL.style.display = 'block';
		 languageEN.style.display = 'none';
	 document.cookie = "language=PL"; 
	 }else{ 
		 languagePL.style.display = 'none';
		 languageEN.style.display = 'block';
	 	document.cookie = "language=EN"; 
	 }
	
}

change_language_to_other.addEventListener('click',change_language,false);

Funkcja getCookie nie jest mojego autorstwa, źródło: https://stackoverflow.com/questions/10730362/get-cookie-by-name

Jeżeli Chciałbyś wykorzystać inny sposób, to możesz napisać tę funkcjonalność na sesjach w PHP przykładowo.

 

Comments

Dzięki wielkie ;)

---

Niestety to rozwiązanie u mnie nie zadziałało. Być może problem leży w tym, że mam dwie ikony do zmiany języka, poniżej wrzucam kod, może uda się coś z tego wykminić :)

  // Language icons //
  var polIco = $('.language_ico_container').find('img').first();
  var engIco = $('.language_ico_container').find('img').last();

  engIco.addClass('transparency');

  function checkTransparency() {
    engIco.click(function () {
      $(this).toggleClass('transparency');
      if (engIco.hasClass('transparency')) {
        polIco.removeClass('transparency');
      } else {
        polIco.addClass('transparency');
      }
    });
    polIco.click(function () {
      $(this).toggleClass('transparency');
      if (polIco.hasClass('transparency')) {
        engIco.removeClass('transparency');
      } else {
        engIco.addClass('transparency');
      }
    });
  };
  // Call function checking transparency in language icons //
  checkTransparency();

  // English & Polish content selection //
  var languagePL = $('.pl');
  var languageEN = $('.eng');

  languageEN.addClass('hidden');

  function changeLanguage() {
    engIco.click(function () {
      languageEN.toggleClass('hidden');
      languagePL.toggleClass('hidden');
    });

    polIco.click(function () {
      languageEN.toggleClass('hidden');
      languagePL.toggleClass('hidden');
    });
  };
  // Call function changing content language
  changeLanguage();

 

---

<div id="change_language_to_other">CHANGE</div>
<div id="change_language_to_other2">CHANGE</div>

var change_language_to_other = document.getElementById('change_language_to_other');
var change_language_to_other2 = document.getElementById('change_language_to_other2');

// (...)

function change_language(){ 
 	 
		languagePL.style.display = 'block';
		languageEN.style.display = 'none';
		document.cookie = "language=PL";  
}

function change_language2(){ 
 	 
		languageEN.style.display = 'block';
		languagePL.style.display = 'none';
		document.cookie = "language=EN";  
}

change_language_to_other.addEventListener('click',change_language,false);
change_language_to_other2.addEventListener('click',change_language2,false);

 

---

Nadal nic...

Może zacznę od tego, że element.style.display u mnie w ogóle nie działa, ale i tak działam na dodawaniu i odejmowaniu klasy z display:none. Więc rozumiem, że tutaj po prostu zamiast tego daje addClass() i removeClass().

Natomiast, gdy zastosuję się do Twoich rad na starcie ładują się obydwa języki, czyli defacto podwójna treść. Domyślam się, że to dlatego, że nie ma zdefiniowanego co ma się wyświetlić na początku (a co ma być ukryte), no ale to zupełnie nie pasuje do powyższego rozwiązania.

Po kliknięciu w jeden z dwóch przycisków stosując Twoje rozwiązanie dzieją się różne dziwne rzeczy min. znika cała treść lub miesza się styl wyświetlania, ale nadal z treścią podwójną (z obu języków).

---

Ustaw może dla languagePL, display: none na początek? Ja się odniosłem do swojego kodu, a nie Twojego z JQuery.

Może zacznę od tego, że element.style.display u mnie w ogóle nie działa

Inline w kodzie to ustaw, a nie w arkuszu stylów.

---

Cóż, idea jest taka, aby na początku ładował się język polski, ale rozumiem, że podałeś tylko przykład i równie dobrze mogę ustawić display:none dla languageEN, ale to nadal nie działa. W tym wypadku po prostu po kliknięciu w przyciski nic się nie dzieje oprócz wcześniejszej zmiany transparentności ikony języka.

Czy mógłbyś napisać to rozwiązanie z użyciem mojego przypadku, z moimi zmiennymi oraz w JQuery? Może to pomoże :)

---

Podałem Ci już działające, gotowe rozwiązanie. Jeśli nie chcesz tego w czystym JS, to przepisz to na JQuery lub na cokolwiek innego.

---

Z tym, że ono niestety nie działa :D Ale ok, może ja coś mieszam :) To spróbuję jeszcze raz :)