Как реализовать смену языка кнопки в зависимости от языка функции перевода страницы?

Помогите как можно реализовать смену языка кнопки в зависимости от языка функции которая задаёт перевод страницы?
Есть код 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');
    }
});


И сама функция перевода языка страницы:
(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);
  • Вопрос задан
  • 165 просмотров
Решения вопроса 1
maatarashiii
@maatarashiii Автор вопроса
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();
});

2. Вариант:
https://codepen.io/yepbro/pen/dyrBvqR
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы