简单的语言国际化实现方法(jquery)

最新推荐文章于 2023-03-24 15:36:48 发布

Alina_x

最新推荐文章于 2023-03-24 15:36:48 发布

阅读量673

点赞数

文章标签：语言国际化

本文链接：https://blog.youkuaiyun.com/qq_40431271/article/details/103477466

版权

jquery实现一个简单版的语言国际化效果

引入jquery.min.js和jquery.language.min.js
写一个js文件，里边写两个版本的语言

   	var Language = {
   	    "EN": {
   	        "music": "music",
   	        "basketball": "basketball",
   	        "picture": "picture",
   	        "calligraphy": "calligraphy"
   	    },
   	    "CN": {
   	        "music": "音乐",
   	        "basketball": "篮球",
   	        "picture": "作画",
   	        "calligraphy": "书法"
   	    }
   	}

body里边使用data-language自定义属性定义

<div id="box">
    <ul>
      <li data-language="music">音乐</li>
      <li data-language="basketball">篮球</li>
      <li data-language="picture">作画</li>
      <li data-language="calligraphy">书法</li>
    </ul>
    <button value="EN">中/英文</button>
  </div>

js实现代码

var lang;
      $(function () {
        lang = $("[data-language]").localize('Language', 'CN');
      });
      $('button').on('click', function () {
        if (this.value == 'CN') {
          lang = $("[data-language]").localize('Language', this.value)
          this.value = 'EN'
        } else {
          lang = $("[data-language]").localize('Language', this.value)
          this.value = 'CN'
        }
      })

点击跳转Github直接获取代码