Menu
I’m trying to implement a multi-lingual site where the user would have the option to pick a language.
I got an example from here:[url]https://codepen.io/codepajamas/pen/NjGOMV
but when I apply the code with some small modifications, it fails to switch the language. I basically want to be able to change the language of all <p>, <H1-6> and <li> elements.
What am I doing wrong? ?
Here’s my modified code in JSfiffle: [url]https://jsfiddle.net/hgbaLy6e/
Code:
[code=html]<!DOCTYPE html>
<html>
<head>
<title>About this site</title>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<link rel =”stylesheet” href=”2.css”>
</head>
<body>
<h3>Change language</h3>
<select id=”lang-switch”>
<option value=”en”>English</option>
<option value=”fr”>Francais</option>
<option value=”es”>español</option>
</select>
<p lang=”en”>Hi!</p>
<p lang=”fr”>Bonjour!</p>
<p lang=”es”>Holla!</p>
</body>
<script src=”2.js”>
</script>
</html>
[CODE][lang=”fr”],
[lang=”es”] {
display: none;
}
html{background-color:black; color:white; }
[CODE]$(‘[lang=”fr”]’).hide();
$(‘[lang=”es”]’).hide();
$(‘#lang-switch’).change(function () {
var lang = $(this).val();
switch (lang) {
case ‘en’:
$(‘[lang]’).hide();
$(‘[lang=”en”]’).show();
break;
case ‘fr’:
$(‘[lang]’).hide();
$(‘[lang=”fr”]’).show();
break;
case ‘es’:
$(‘[lang]’).hide();
$(‘[lang=”es”]’).show();
break;
default:
$(‘[lang]’).hide();
$(‘[lang=”en”]’).show();
}
});