Tłumaczenie zawartości listy w JavaScript

Question

Cześć,

Mam problem z tłumaczeniem nazw w menu.

Otóż wszystkie teksty na stronie tłumaczy mi spoko tylko nie wiem jak mam przetłumaczyć tekst w menu.

Tekst w menu zapisany jest w javascriptowej liście

 var planet = ["Strona główna", "Strona 7", "Strona 6","Strona 5", "Strona 4", "Strona 3", "Strona 2", "Strona 1"];

a w HTML jest podmieniana nazwa w tym miejscu

					<div class="name_container">
					<p class="pn">Strona główna</p>
					</div>

jak mogę zrobić aby po wybraniu odpowiedniego języka tłumaczył mi zawartość menu odpowiednio do wybranego języka?

Kod można podejrzeć na tej stronie: https://codepen.io/xjafajx/pen/YzVeOYM

Z góry dziękuje za pomoc

Answer 1

Możesz też dodać drugą tablicę z tłumaczeniem (jak masz teraz translate_to_english, translate_to_polish) np.

const  planet_to_polish =  ["Strona główna", "Strona 7", ... , "Strona 1"],
      planet_to_english =  ["Home page", "Page 7", ..., "Page 1"];

i podmieniać na zasadzie "klonowania" zawartość tablicy planet

 

3 Ways to Copy or Clone Array in Javascript

 

np.:

const  planet_to_polish =  ["Strona główna", "Strona 7", "Strona 6","Strona 5", "Strona 4", "Strona 3", "Strona 2", "Strona 1"],
      planet_to_english =  ["Home page", "Page 7", "Page 6","Page 5", "Page 4", "Page 3", "Page 2", "Page 1"];

var planet = [...planet_to_polish]; // ustawienie domyślne - pierwsze uruchomienie strony

no i odpowiedni wpis dodać do 

    switch(e.target.id) {
      case "english": insertTranslate(translate_to_english);
                      // np. tutaj dla english
        break;
      case "polish": insertTranslate(translate_to_polish);
                      // np. tutaj dla polish
        break;

    }

 

no i trzeba wtedy "zaprogramować" podmianę tekstu w monecie zmiany języka( kliknięcia na wybraną flagę), bo w trakcie przewijania już tekst jest "podmieniany".

Comments

Próbowałem tak samo zrobić w moim kodzie ale coś mi nie wychodzi.

Nie podmienia listy tylko data-translate-id od 0 do 7. Menu nie zmienia języka.

Czy możesz mi dokładniej to zaprezentować bo nie wiem gdzie robię błąd... ☹️

---

To zostaje

const  planet_to_polish =  ["Strona główna", "Strona 7", "Strona 6","Strona 5", "Strona 4", "Strona 3", "Strona 2", "Strona 1"],
      planet_to_english =  ["Home page", "Page 7", "Page 6","Page 5", "Page 4", "Page 3", "Page 2", "Page 1"];
 
var planet = [...planet_to_polish]; // ustawienie domyślne - pierwsze uruchomienie strony

to planet_to_english, usuń

const translate_to_english = [
    planet_to_english,
    'Home',
    "Lorem Ipsum ..."
    . . .
];

to samo tu, planet_to_polish, usuń

const translate_to_polish = [
    planet_to_polish,
    'Główna',
    "Lorem Ipsum ..."
    . . .
];

zapisz tak

const translate_to_english = [
    null,
    'Home',
    "Lorem Ipsum ..."
    . . .
];

const translate_to_polish = [
    null,
    'Główna',
    "Lorem Ipsum ..."
    . . .
];

 

dopisz w 

    switch(e.target.id) {
      case "english": planet = [...planet_to_english];
                      insertTranslate(translate_to_english);                      
        break;
      case  "polish": planet = [...planet_to_polish];
                      insertTranslate(translate_to_polish);                      
        break;                
    }

ponieważ Twoja zmienna moon_id i tablica planet  jest globalna to możemy ją wykorzystać np. tu

    function insertTranslate(translate) {
      const content_to_translate = document.querySelectorAll('[data-translate-id]');

      // <p class="pn" data-translate-id="0">Strona główna</p>
      content_to_translate[0].textContent = planet[moon_id];
      
      content_to_translate.forEach((tag_html, index) => {
        if (index > 0) tag_html.innerHTML = translate[index];
      });
    }

 

---

Wielkie dzięki.

Działa poprawnie :D

A jeszcze na koniec ostatnie pytanko co zrobić jeżeli js mam rozbitego na dwa pliki tzn.

wszystko od const translate_to_english = [...]; i poniżej mam w pliku language.js a wszystko powyżej co sie znajduje w pliku script.js to jak przesyłać pomiędzy plikami potrzebne zmienne i zawartość?

Jak to najlepiej połączyć żeby dobrze funkcjonowało?