中英文切换（仿i18n）

最新推荐文章于 2024-05-14 13:32:29 发布

小森呀

最新推荐文章于 2024-05-14 13:32:29 发布

阅读量365

点赞数

CC 4.0 BY-SA版权

分类专栏：封装

本文链接：https://blog.youkuaiyun.com/KEY2018/article/details/116278808

封装专栏收录该内容

11 篇文章

订阅专栏

第一种

1.基于jQuery，先引入jQuery

2.准备语言json文件

cn.json-----中文语言

{
      "langAbout": "关于我们",
      "langResume": "投递简历"
}

en.json-----中文语言

{
    "langAbout": "About us",
    "langResume": "Send your resume"
}

3.html元素设置

<h1 lang="langAbout">关于我们</h1>
<div lang="langResume">投递简历</div>

4.核心js代码

 lang("./en.json");
      function lang(url) {
        $.ajax({
          url,
          success: function (res) {
            $("[lang^='lang']").each(function () {
              $(this).prop("firstChild").nodeValue = res[$(this).attr("lang")];
            });
          },
        });
      }

第二种

1.基于jQuery，先引入jQuery

2.准备语言json文件

lang.json-----语言文件

{
    "langAbout": {
        "cn":"加入我们",
        "en":"Join us"
    },
    "langResume": {
        "cn":"投递简历",
        "en":"Send your resume"
    }
}

3.html元素设置

<h1 lang="langAbout">关于我们</h1>
<div lang="langResume">投递简历</div>

4.核心js代码

lang("./lang.json", "en");
      function lang(url, lang) {
        $.ajax({
          url,
          success: function (res) {
            $("[lang^='lang']").each(function () {
              $(this).prop("firstChild").nodeValue =
                res[$(this).attr("lang")][lang];
            });
          },
        });
      }

第三种

1.基于jQuery，先引入jQuery

2.准备语言json文件

lang.json-----语言文件

{
    "langAbout": ["加入我们","Join us"],
    "langResume": ["投递简历","Send your resume"]
}

3.html元素设置

<h1 lang="langAbout">关于我们</h1>
<div lang="langResume">投递简历</div>

4.核心js代码

lang("./lang.json", 1);
      function lang(url, lang) {
        $.ajax({
          url,
          success: function (res) {
            $("[lang^='lang']").each(function () {
              $(this).prop("firstChild").nodeValue =
                res[$(this).attr("lang")][lang];
            });
          },
        });
      }