jquery与i18next实现国际化_jquery-i18next-优快云博客

本文介绍如何使用i18next与jQuery实现网站的国际化，通过json数据格式进行多语言切换，提供了详细的实现代码与配置结构，适用于前端开发者进行国际化项目开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 基本介绍

jquery与i18next配合基于json数据格式实现国际化，而jquery与jquery.i18n.properties配合基于键值对数据格式实现国际化。
个人推荐使用i18next实现国际化，它有较详细的开发文档，并且是基于json的数据格式。
I18next的官网：https://www.i18next.com/
注意：（1）一定要注意jquery的版本和i18next的版本问题。
（2）resGetPath:'./js/language/locales/__lng__/__ns__.json’代表的意思是“./js/language/locales/en/translation.json”或者“./js/language/locales/zh/translation.json”。
下图是本文的i18next整体配置结构，也可从github上下载：https://github.com/MasonYyp/jquery_i18next.git

2 源代码及实现

2.1 结果截图

2.2 js源代码

main()

function main(){
test();
}

function test(){
   $("#en").click(function(){
       update_en_language();
   });

   $("#zh").click(function(){
       update_zh_language();
   })
}

function update_en_language(){
   $.i18n.init({
       lng: 'en',
       resGetPath : './js/language/locales/__lng__/__ns__.json'
   }, function(err, t){
       $("#henu").text($.i18n.t('message'))
   });
}

function update_zh_language(){
   $.i18n.init({
       lng: 'zh',
       resGetPath : './js/language/locales/__lng__/__ns__.json'
   }, function(err, t){
       $("#henu").text($.i18n.t('message'))
   });
}

2.3 html源代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>

       <script type="text/javascript" src="js/libs/jquery-1.9.0.min.js"></script>
       <script type="text/javascript" src="js/libs/i18next-1.6.3.min.js"></script>

       <script type="text/javascript" src="js/language/configure_i8n.js"></script>
   </head>
   <body>
       <button id="zh">中文</button>
       <button id="en">English</button>
       <div id="henu">河南大学</div>
       <script type="text/javascript" src="js/index.js"></script>
   </body>
</html>