• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Tłumaczenie zawartości listy w JavaScript

Object Storage Arubacloud
+1 głos
150 wizyt
pytanie zadane 27 lipca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)

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

1 odpowiedź

0 głosów
odpowiedź 28 lipca 2021 przez VBService Ekspert (254,490 p.)
wybrane 28 lipca 2021 przez xjafajx
 
Najlepsza

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".

komentarz 2 sierpnia 2021 przez xjafajx Użytkownik (740 p.)
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... ☹️
komentarz 3 sierpnia 2021 przez VBService Ekspert (254,490 p.)
edycja 3 sierpnia 2021 przez VBService

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];
      });
    }

 

komentarz 3 sierpnia 2021 przez xjafajx Użytkownik (740 p.)
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?

Podobne pytania

0 głosów
0 odpowiedzi 122 wizyt
pytanie zadane 26 lipca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)
0 głosów
1 odpowiedź 411 wizyt
pytanie zadane 13 września 2020 w PHP przez SyriuszBlack Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 2,172 wizyt
pytanie zadane 23 maja 2017 w JavaScript przez nitrio578 Początkujący (270 p.)

92,661 zapytań

141,554 odpowiedzi

319,995 komentarzy

62,028 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...