$('.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);
$("button").click(function() {
$(this).text(function(i, text) {
return text === "Показать всё" ? "Скрыть всё" : "Показать всё";
})
});
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);
});
<!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>
$(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);
});
});
});
});
lang-toggle
и дата-атрибутом data-lang="ru"
('.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("Светлая тема");
}
}
});
<!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();
});