用JavaScript+jquery手写一个简单的多语言
以下是一个简单的使用JavaScript和jQuery实现的多语言切换功能的示例代码：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Multi-Language Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="content">
<h1 data-i18n="welcome"></h1>
<p data-i18n="description"></p>
<button data-i18n="btn_en"></button>
<button data-i18n="btn_es"></button>
</div>
<script src="multilingual.js"></script>
</body>
</html>JavaScript部分 (multilingual.js):
$(document).ready(function() {
var languages = {
en: {
welcome: "Welcome to our website",
description: "This is a simple example of a multilingual website.",
btn_en: "English",
btn_es: "Español"
},
es: {
welcome: "Bienvenido a nuestro sitio web",
description: "Esto es un ejemplo sencillo de un sitio web multilingüe.",
btn_en: "Inglés",
btn_es: "Español"
}
};
var currentLanguage = 'en';
function translate(lang) {
currentLanguage = lang;
$('[data-i18n]').each(function() {
var textKey = $(this).data('i18n');
$(this).text(languages[lang][textKey]);
});
}
$('button').click(function() {
var lang = $(this).data('i18n');
lang = lang.substring(3); // Remove "btn_"
translate(lang);
});
translate(currentLanguage); // Translate to default language on load
});在这个示例中，我们定义了一个languages对象，它包含了英语和西班牙语的翻译。我们使用jQuery的.each()方法来遍历所有带有data-i18n属性的元素，并根据当前选定的语言来更新它们的文本内容。按钮点击事件处理函数会根据按钮的data-i18n属性来切换语言。
评论已关闭