Как реализовать смену языка кнопки в зависимости от языка функции перевода страницы?
Помогите как можно реализовать смену языка кнопки в зависимости от языка функции которая задаёт перевод страницы?
Есть код JS который меняет тему страницы и при нажатии название кнопки в зависимости от темы, как ей задать язык перевода через функцию которая её осуществляет?
Кнопка которая осуществляет смену темы на сайте:
$('.theme-toggle').on('click', function () { document.body.classList.toggle('light-theme'); if($(this).hasClass('light')) { $(this).toggleClass('light dark').text('Dark theme'); } else if ($(this).hasClass('dark')) { $(this).toggleClass('dark light').text('Light theme'); } }); |
$('.theme-toggle').on('click', function () { document.body.classList.toggle('light-theme'); if($(this).hasClass('light')) { $(this).toggleClass('light dark').text('Dark theme'); } else if ($(this).hasClass('dark')) { $(this).toggleClass('dark light').text('Light theme'); } });
И сама функция перевода языка страницы:
(function($) { function Translate() { this.init = function(attribute, lang) { this.attribute = attribute; this.lang = lang; }; this.process = function() { let _self = this; let xrhFile = new XMLHttpRequest(); xrhFile.open("GET", "./src/scripts/translations/"+this.lang+".json", true); xrhFile.onreadystatechange = function () { if(xrhFile.readyState === 4) { if(xrhFile.status === 200 || xrhFile.status == 0) { let LangObject = JSON.parse(xrhFile.responseText); let allDom = document.getElementsByTagName("*"); for(let i =0; i < allDom.length; i++){ let elemment = allDom[i]; let key = elemment.getAttribute(_self.attribute); if(key != null) { elemment.innerHTML = LangObject[key]; } } } } }; xrhFile.send(); }; } function loadNewLang(new_lang) { let translate = new Translate(); let currentLang = new_lang; let attributeName = 'data-lang'; translate.init(attributeName, currentLang); translate.process(); } loadNewLang('en'); $('.language-switcher').on('click', function(button) { button.preventDefault(); if($(this).hasClass('ru')) { $(this).toggleClass('ru en').text('English'); loadNewLang('en'); } else if ($(this).hasClass('en')) { $(this).toggleClass('en ru').text('Русский'); loadNewLang('ru'); } }); })(jQuery); |
(function($) { function Translate() { this.init = function(attribute, lang) { this.attribute = attribute; this.lang = lang; }; this.process = function() { let _self = this; let xrhFile = new XMLHttpRequest(); xrhFile.open("GET", "./src/scripts/translations/"+this.lang+".json", true); xrhFile.onreadystatechange = function () { if(xrhFile.readyState === 4) { if(xrhFile.status === 200 || xrhFile.status == 0) { let LangObject = JSON.parse(xrhFile.responseText); let allDom = document.getElementsByTagName("*"); for(let i =0; i < allDom.length; i++){ let elemment = allDom[i]; let key = elemment.getAttribute(_self.attribute); if(key != null) { elemment.innerHTML = LangObject[key]; } } } } }; xrhFile.send(); }; } function loadNewLang(new_lang) { let translate = new Translate(); let currentLang = new_lang; let attributeName = 'data-lang'; translate.init(attributeName, currentLang); translate.process(); } loadNewLang('en'); $('.language-switcher').on('click', function(button) { button.preventDefault(); if($(this).hasClass('ru')) { $(this).toggleClass('ru en').text('English'); loadNewLang('en'); } else if ($(this).hasClass('en')) { $(this).toggleClass('en ru').text('Русский'); loadNewLang('ru'); } }); })(jQuery);
Дополнительно:
А в чем собственно проблема? Что не работает, какая ошибка, в каком месте?
В твоей конструкции ты пытаешься проверить наличие класса ru, который там будет всегда. Твои toggle будут этому способствовать.
Вот что ответил ии
Для jquery
$("button").click(function() { $(this).text(function(i, text) { return text === "Показать всё" ? "Скрыть всё" : "Показать всё"; }) }); |
$("button").click(function() { $(this).text(function(i, text) { return text === "Показать всё" ? "Скрыть всё" : "Показать всё"; }) });
На js
const btn = document.querySelector('.btn > span'); btn.addEventListener('click', function() { btn.innerHTML = (btn.innerHTML === 'Показать всё') ? 'Скрыть всё' : 'Показать всё'; }); |
const btn = document.querySelector('.btn > span'); btn.addEventListener('click', function() { btn.innerHTML = (btn.innerHTML === 'Показать всё') ? 'Скрыть всё' : 'Показать всё'; });
$('.theme-toggle').on('click', function () { document.body.classList.toggle('light-theme'); var currentValue = $('.theme-toggle').attr('data-lang'); var newLang = currentValue === 'themeToggle-light' ? 'themeToggle-dark' : 'themeToggle-light'; $('.theme-toggle').attr('data-lang', newLang); $('.theme-toggle').html(newLang); }); |
$('.theme-toggle').on('click', function () { document.body.classList.toggle('light-theme'); var currentValue = $('.theme-toggle').attr('data-lang'); var newLang = currentValue === 'themeToggle-light' ? 'themeToggle-dark' : 'themeToggle-light'; $('.theme-toggle').attr('data-lang', newLang); $('.theme-toggle').html(newLang); });
1) По клику на кнопку у тебя нужный языковой json-файл подгружается?
2) Каким образом у тебя сейчас выводится дефолтный текст?
Хоть бы кусочек хтмл привел для понимания :) ну и json-файл тоже не помешало бы показать (хотя бы кусок) для понимания структуры
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title data-lang="title"></title> <link rel="stylesheet" href="src/css/global.css"> </head> <body> <div class="layout"> <header> <h1 class="heading" data-lang="heading" style="border-bottom: 3px solid var(--border-color);"></h1> </header> <main> <div class="primaryBlock"> <div class="secondaryBlock"> <div class="descriptionBlock"> <h2 class="descriptionTitle" data-lang="descriptionTitle"></h2> <p class="descriptionText" data-lang="descriptionText"></p> </div> <div class="newBlock"> <div class="newBlockTitle"> <h2 class="newTitle" data-lang="newTitle"></h2> <a href="#" class="moreTitle close">Open more.</a> </div> <p class="newText" data-lang="newText"></p> <p class="moreText" data-lang="moreText"></p> </div> <div class="progressBlock"> <h2 class="progressTitle" data-lang="progressTitle"></h2> <p class="progressText" data-lang="progressText"></p> <ul class="progressList"> <li class="git" data-lang="git"></li> </ul> </div> </div> <div class="information"> <div class="aboutMe"> <h2 class="aboutMeTitle" data-lang="aboutMeTitle"></h2> <p class="userName" data-lang="userName"></p> <p class="repo" data-lang="repo"></p> </div> <div class="social"> <h2 class="socialTitle" data-lang="socialTitle"></h2> <ul class="socialList"> <li class="email" data-lang="email"></li> <li class="gitHub" data-lang="gitHub"></li> </ul> </div> </div> </div> </main> <footer> <div class="function"> <button class="language-switcher en">English</button> <button class="theme-toggle dark" data-lang="themeToggle-light">Light theme</button> </div> </footer> </div> <script defer src="src/scripts/jquery.min.js"></script> <script type="module" src="src/scripts/index.js"></script> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title data-lang="title"></title> <link rel="stylesheet" href="src/css/global.css"> </head> <body> <div class="layout"> <header> <h1 class="heading" data-lang="heading" style="border-bottom: 3px solid var(--border-color);"></h1> </header> <main> <div class="primaryBlock"> <div class="secondaryBlock"> <div class="descriptionBlock"> <h2 class="descriptionTitle" data-lang="descriptionTitle"></h2> <p class="descriptionText" data-lang="descriptionText"></p> </div> <div class="newBlock"> <div class="newBlockTitle"> <h2 class="newTitle" data-lang="newTitle"></h2> <a href="#" class="moreTitle close">Open more.</a> </div> <p class="newText" data-lang="newText"></p> <p class="moreText" data-lang="moreText"></p> </div> <div class="progressBlock"> <h2 class="progressTitle" data-lang="progressTitle"></h2> <p class="progressText" data-lang="progressText"></p> <ul class="progressList"> <li class="git" data-lang="git"></li> </ul> </div> </div> <div class="information"> <div class="aboutMe"> <h2 class="aboutMeTitle" data-lang="aboutMeTitle"></h2> <p class="userName" data-lang="userName"></p> <p class="repo" data-lang="repo"></p> </div> <div class="social"> <h2 class="socialTitle" data-lang="socialTitle"></h2> <ul class="socialList"> <li class="email" data-lang="email"></li> <li class="gitHub" data-lang="gitHub"></li> </ul> </div> </div> </div> </main> <footer> <div class="function"> <button class="language-switcher en">English</button> <button class="theme-toggle dark" data-lang="themeToggle-light">Light theme</button> </div> </footer> </div> <script defer src="src/scripts/jquery.min.js"></script> <script type="module" src="src/scripts/index.js"></script> </body> </html>
en.json
{
"title": "Mini project",
"heading": "Q: What is used?
A: HTML, CSS and JS.",
"descriptionTitle": "Description:",
"descriptionText": "Hello everyone, I already wrote in the description that this is a mini project in which I am learning JS, TS and various frameworks for JS, improving my skills in HTML, SASS, CSS, etc.",
"newTitle": "What's new:",
"newText": "02/18/24: I tried to add a page translation using JS, as a result, if you followed the project, I didn’t succeed, but the next day I was able to add a page translation function using JS.",
"moreText": "02/21/24: A theme change was added to the site when you click on a button in the footer, from dark to light.",
"progressTitle": "Progress:",
"progressText": "At this point I will write what new things I have learned so far.",
"git": "Git — .git",
"aboutMeTitle": "About me:",
"userName": "Creator: Maatarashiii",
"repo": "Repository: here.",
"socialTitle": "Contact me:",
"email": "Email — maatarashiii@gmail.com",
"gitHub": "My GitHub profile: here.",
"themeToggle-dark": "Dark theme",
"themeToggle-light": "Light theme"
}
$(document).ready(function() { $.getJSON("./src/scripts/translations/en.json", function(data) { let jsonData = data; $(document).ready(function() { $('.theme-toggle').click(function() { document.body.classList.toggle('light-theme'); let currentValue = $(this).attr('data-lang'); let newLang = currentValue === 'themeToggle-light' ? 'themeToggle-dark' : 'themeToggle-light'; let newTitle = jsonData[newLang]; $(this).attr('data-lang', newLang); $(this).text(newTitle); }); }); }); }); |
$(document).ready(function() { $.getJSON("./src/scripts/translations/en.json", function(data) { let jsonData = data; $(document).ready(function() { $('.theme-toggle').click(function() { document.body.classList.toggle('light-theme'); let currentValue = $(this).attr('data-lang'); let newLang = currentValue === 'themeToggle-light' ? 'themeToggle-dark' : 'themeToggle-light'; let newTitle = jsonData[newLang]; $(this).attr('data-lang', newLang); $(this).text(newTitle); }); }); }); });
Когда нажимаешь на кнопку смены темы название кнопки меняется, но когда нажимаешь на перевод то она один раз переводится на момент нажатия, после того как нажимаешь на кнопку она просто перестаёт переводится хотя перевод страницы по факту работает, как сделать так чтобы переводчик в реальном времени просматривал data-lang
1) Вернись к исходному коду, который был у тебя до внедрения переключения языков.
2) Добавь рядом с кнопкой переключения темы кнопку переключения языков с классом lang-toggle и дата-атрибутом data-lang="ru"
3) Добавь обработчик клику по кнопке смены языка ('.lang-toggle').on что бы он меня текст кнопки и значение data-lang. Только это. Как это сделаешь и убедишься, что все работает то пиши сюда. Подскажу что делать дальше
$('.theme-toggle').on('click', function () { document.body.classList.toggle('light-theme'); if ($(this).hasClass('light')) { $(this).toggleClass('light dark'); if (currentLanguage === 'en') { $(this).text("Dark theme"); } else if (currentLanguage === 'ru') { $(this).text("Темная тема"); } } else if ($(this).hasClass('dark')) { $(this).toggleClass('dark light'); if (currentLanguage === 'en') { $(this).text("Light theme"); } else if (currentLanguage === 'ru') { $(this).text("Светлая тема"); } } }); |
$('.theme-toggle').on('click', function () { document.body.classList.toggle('light-theme'); if ($(this).hasClass('light')) { $(this).toggleClass('light dark'); if (currentLanguage === 'en') { $(this).text("Dark theme"); } else if (currentLanguage === 'ru') { $(this).text("Темная тема"); } } else if ($(this).hasClass('dark')) { $(this).toggleClass('dark light'); if (currentLanguage === 'en') { $(this).text("Light theme"); } else if (currentLanguage === 'ru') { $(this).text("Светлая тема"); } } });
Только чтобы она поменяла текст на тот который нужен, нужно нажать тогда она поменяет текст кнопки, вот теперь вопрос как этот исправить
И когда я просил показать кнопки, то имел ввиду не скриншоты, а html-код.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title data-lang="title"></title> <link rel="stylesheet" href="src/css/global.css"> </head> <body> <div class="layout"> <header> <h1 class="heading" data-lang="heading" style="border-bottom: 3px solid var(--border-color);"></h1> </header> <main> <div class="primaryBlock"> <div class="secondaryBlock"> <div class="descriptionBlock"> <h2 class="descriptionTitle" data-lang="descriptionTitle"></h2> <p class="descriptionText" data-lang="descriptionText"></p> </div> <div class="newBlock"> <div class="newBlockTitle"> <h2 class="newTitle" data-lang="newTitle"></h2> <a class="moreTitle close">Show more</a> </div> <p class="newText" data-lang="newText"></p> <p class="moreext" data-lang="moreText"></p> </div> <div class="progressBlock"> <h2 class="progressTitle" data-lang="progressTitle"></h2> <p class="progressText" data-lang="progressText"></p> <ul class="progressList"> <li class="git" data-lang="git"></li> </ul> </div> </div> <div class="information"> <div class="aboutMe"> <h2 class="aboutMeTitle" data-lang="aboutMeTitle"></h2> <p class="userName" data-lang="userName"></p> <p class="repo" data-lang="repo"></p> </div> <div class="social"> <h2 class="socialTitle" data-lang="socialTitle"></h2> <ul class="socialList"> <li class="email" data-lang="email"></li> <li class="gitHub" data-lang="gitHub"></li> </ul> </div> </div> </div> </main> <footer> <div class="function"> <button class="languageSwitcher en">English</button> <button class="themeToggle light">Light theme</button> </div> </footer> </div> <script src="src/scripts/jquery.min.js"></script> <script type="module" src="src/scripts/index.js"></script> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title data-lang="title"></title> <link rel="stylesheet" href="src/css/global.css"> </head> <body> <div class="layout"> <header> <h1 class="heading" data-lang="heading" style="border-bottom: 3px solid var(--border-color);"></h1> </header> <main> <div class="primaryBlock"> <div class="secondaryBlock"> <div class="descriptionBlock"> <h2 class="descriptionTitle" data-lang="descriptionTitle"></h2> <p class="descriptionText" data-lang="descriptionText"></p> </div> <div class="newBlock"> <div class="newBlockTitle"> <h2 class="newTitle" data-lang="newTitle"></h2> <a class="moreTitle close">Show more</a> </div> <p class="newText" data-lang="newText"></p> <p class="moreext" data-lang="moreText"></p> </div> <div class="progressBlock"> <h2 class="progressTitle" data-lang="progressTitle"></h2> <p class="progressText" data-lang="progressText"></p> <ul class="progressList"> <li class="git" data-lang="git"></li> </ul> </div> </div> <div class="information"> <div class="aboutMe"> <h2 class="aboutMeTitle" data-lang="aboutMeTitle"></h2> <p class="userName" data-lang="userName"></p> <p class="repo" data-lang="repo"></p> </div> <div class="social"> <h2 class="socialTitle" data-lang="socialTitle"></h2> <ul class="socialList"> <li class="email" data-lang="email"></li> <li class="gitHub" data-lang="gitHub"></li> </ul> </div> </div> </div> </main> <footer> <div class="function"> <button class="languageSwitcher en">English</button> <button class="themeToggle light">Light theme</button> </div> </footer> </div> <script src="src/scripts/jquery.min.js"></script> <script type="module" src="src/scripts/index.js"></script> </body> </html>
function updateButtonMoreTitle() {
if (currentLanguage === 'en') {
$('.moreTitle').text($('.moreTitle').hasClass('close') ? "Hide all" : "Show more");
} else if (currentLanguage === 'ru') {
$('.moreTitle').text($('.moreTitle').hasClass('close') ? "Скрыть всё" : "Показать все");
}
}
setInterval(updateButtonMoreTitle, 1);
$('.moreTitle').on('click', function () {
$(".moreText").toggle('showText');
$(this).toggleClass('close open');
updateButtonMoreTitle();
});
2 варианта решения:
1. Вариант:
function updateButtonMoreTitle() { if (currentLanguage === 'en') { $('.moreTitle').text($('.moreTitle').hasClass('close') ? "Hide all" : "Show more"); } else if (currentLanguage === 'ru') { $('.moreTitle').text($('.moreTitle').hasClass('close') ? "Скрыть всё" : "Показать все"); } } setInterval(updateButtonMoreTitle, 1); $('.moreTitle').on('click', function () { $(".moreText").toggle('showText'); $(this).toggleClass('close open'); updateButtonMoreTitle(); }); |
function updateButtonMoreTitle() { if (currentLanguage === 'en') { $('.moreTitle').text($('.moreTitle').hasClass('close') ? "Hide all" : "Show more"); } else if (currentLanguage === 'ru') { $('.moreTitle').text($('.moreTitle').hasClass('close') ? "Скрыть всё" : "Показать все"); } } setInterval(updateButtonMoreTitle, 1); $('.moreTitle').on('click', function () { $(".moreText").toggle('showText'); $(this).toggleClass('close open'); updateButtonMoreTitle(); });
2. Вариант:
https://codepen.io/yepbro/pen/dyrBvqR
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для реализации смены языка кнопки в зависимости от выбранного языка функции перевода страницы, вам необходимо создать функцию, которая будет обновлять текст кнопки на соответствующий язык.
Прежде всего, вам нужно определить, каким образом вы будете хранить языковые настройки на вашем сайте. Один из способов - использовать переменную в URL или в cookies, чтобы хранить выбранный язык.
Далее, создайте функцию, которая будет отображать текст кнопки на соответствующем языке в зависимости от выбранного языка. Например, если вы используете PHP, ваш код может выглядеть следующим образом:
function getLanguageButtonText($lang) { switch ($lang) { case 'en': return 'English'; break; case 'fr': return 'Français'; break; case 'de': return 'Deutsch'; break; // Добавьте другие языки по мере необходимости default: return 'Language'; } }
Затем в вашем HTML-коде вы можете использовать эту функцию для отображения текста на кнопке:
<button></button>
Теперь, когда пользователь выбирает другой язык на вашем сайте, вам нужно обновить переменную с выбранным языком и перезагрузить страницу, чтобы отобразить обновленный текст на кнопке.
Надеюсь, это решение поможет вам реализовать смену языка кнопки в зависимости от языка функции перевода страницы на вашем сайте.