用JavaScript+jquery手写一个简单的多语言

这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。

以下是一个简单的使用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属性来切换语言。

用JavaScript+jquery手写一个简单的多语言

评论已关闭

推荐阅读