i18next实现前端页面国际化多语言

最新推荐文章于 2025-05-02 14:16:25 发布

leoSong.

最新推荐文章于 2025-05-02 14:16:25 发布

阅读量3.9k

点赞数

分类专栏： frontEnd 文章标签： i18n 国际化前端

本文链接：https://blog.youkuaiyun.com/qq_34162277/article/details/84927293

版权

frontEnd 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用jQuery和i18next库实现网站多语言切换的方法，通过JSON文件加载不同语言的资源，动态更新页面元素的文字和图片，实现流畅的语言切换体验。

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

代码记录：

//js
$(document).ready(function() {
    i18n.init({
        resGetPath: './locales/__lng__/__ns__.json'
    }, function(t) {
        // 加载默认语言
        $('body').i18n();
    });
    $("#jumpMenu").change(function(){
        i18n.init({
            resGetPath: './locales/__lng__/__ns__.json',
            lng : $("#jumpMenu").val()
        }, function(t) {
            $('body').i18n();
        });
    });
});

//html
<h1 data-i18n="title"> </h1>
<img src="" data-i18n="[src]flag" alt=""/>
<button data-i18n="button.english" id="en">en </button>
<button data-i18n="button.chinese" id="zh">中文 </button>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/1.6.3/i18next-1.6.3.min.js"></script>

//en json  位置/locales/en/translation.json
{
  "title": "title",
  "button": {
    "chinese": "chinese",
    "english": "english"
  },
  "flag": {
    "italian": "img/en.jpg"
  }
}
//zh json   位置/locales/en/translation.json
{
  "title": "标题",
  "button": {
    "chinese": "中文",
    "english": "中文"
  },
  "flag": {
    "italian": "img/zh.jpg"
  }
}