Вопрос: Как лучше реализовать смену языка на сайте?

Лучший ответ: Вот пример кода
Кусок разметки
<nav class="site-nav">
	<ul id="navigation">
		<li data-menuanchor="about-us">
			<a href="#about-us" data-lang="about_academy">Про академию</a>
		</li>
		<li data-menuanchor="what-we-offer">
			<a href="#what-we-offer" data-lang="proposal">Что мы предлагаем</a>
		</li>
		<li data-menuanchor="your-benefits">
			<a href="#your-benefits" data-lang="your_result">Что ты получишь</a>
		</li>
		<li data-menuanchor="our-blog">
			<a href="#our-blog" data-lang="blog">Блог</a>
		</li>
		<li data-menuanchor="testimonials">
			<a href="#testimonials" data-lang="feedback">Отзывы</a>
		</li>
		<li data-menuanchor="contacts">
			<a href="#contacts" data-lang="contacts">Контакты</a>
		</li>
		<li class="language-switcher-wrapper">
			<button class="language-switcher ua">UA</button>
		</li>
	</ul>
</nav>
data-lang - это то что нужно переводить
Сами данные лежат в двух файлах в папке translations
ru.json
{
  "about_academy": "Про Академию",
  "proposal": "Что мы предлагаем",
  "your_result": "Что ты получишь",
  "feedback": "Что говорят выпускники",
  "blog": "Блог",
  "contacts": "Контакты",
  "our_mission_main": "Наша миссия"
}
ua.json
{
  "about_academy": "Про Академію",
  "proposal": "Що ми пропонуємо",
  "your_result": "Що ти отримаєш",
  "feedback": "Що кажуть випускники",
  "blog": "Блог",
  "contacts": "Контакти",
  "our_mission_main": "Наша місія"
}
JS
(function($) {

function Translate() { 
	//initialization
	this.init =  function(attribute, lng) {
		this.attribute = attribute;
		this.lng = lng;
	};
	//translate 
	this.process = function() {
		var _self = this;
		var xrhFile = new XMLHttpRequest();
		//load content data 
		xrhFile.open("GET", "./translations/"+this.lng+".json", false);
		xrhFile.onreadystatechange = function () {
			if(xrhFile.readyState === 4) {
				if(xrhFile.status === 200 || xrhFile.status == 0) {
					var LngObject = JSON.parse(xrhFile.responseText);
					console.log(LngObject["name1"]);
					var allDom = document.getElementsByTagName("*");
					for(var i =0; i < allDom.length; i++){
						var elem = allDom[i];
						var key = elem.getAttribute(_self.attribute);
						if(key != null) {
							console.log(key);
							elem.innerHTML = LngObject[key];
						}
					}
				}
			}
		};
		xrhFile.send();
	};
}

// Change language
function loadNewLang(new_lang) {
	var translate = new Translate();
	var currentLng = new_lang;
	var attributeName = 'data-lang';
	translate.init(attributeName, currentLng);
	translate.process();
}

loadNewLang('ua');

$('.language-switcher').on('click', function(e) {
	e.preventDefault();
	$('.preloader').removeAttr('style');
	if($(this).hasClass('ru')) {
		$(this).toggleClass('ru ua').text('UA');
		loadNewLang('ua');
		ln_preloader();
	} else if ($(this).hasClass('ua')) {
		$(this).toggleClass('ua ru').text('RU');
		loadNewLang('ru');
		ln_preloader();
	}
});

})(jQuery);
работает это все из под сервера


Худший ответ: Нажимаешь на нужный язык - через eachперебираешь и находишь нужный, после чего можешь присвоить нужному языку нужный класс и с этим работать. Но не забывай перед этим почистить класс у старого языка
В случае, если можно добавить один класс ко всем, то вот самый легкий вариант:
snippet