首先在html結構中，把需要轉換的結構都加上類名，最好加在含有 文字的最近的父級上，因為我們要利用文字節點來替換。

然後構造出類似json這種感覺的資料，方便替換操作。還有宣告一個變數flag，記錄當前使用的什麼語言。

var flag = 'cn';
  var langArr = [
    {'en':'簡體中文','cn':'English'},
    {'en':'About me','cn':'關於我'},
    {'en':'Experience','cn':'學習經歷'},
    {'en':'Skill tree','cn':'技能樹'},
    {'en':'Call me','cn':'聯絡我'},
    {'en':'Zhuang Cheng Xiang','cn':'莊城祥'},
    {'en':'I am a Weber who loves life and enjoys learning.','cn':'我是一個愛生活，樂學習的Weber'},
    {'en':'The beginning of the front end','cn':'從零開始的前端'},
    {'en':'I have been interested in webpage technology very early,but I have never had a chance and enough time. In the freshman\'s winter vacation,I started to get started. Although the middle of the year has been intermittent,the difficulty has continued to rise, but I have not given up.I am fortunate to have grown up in this era of rapid web development.The ubiquitous tutorials, websites, and almost just beginning to learnare accompanied by the new features of this h5, c3, and ES6, which is exciting.','cn':'很早就對網站網頁技術有興趣，但一直沒機會和足夠的時間。在大一的寒假開始入門，到現在雖然中間斷斷續續,難度持續攀升,但姑且還沒有放棄。我慶幸成長在這個web高速發展的年代。隨處可見的教程,網站，幾乎剛開始學習就伴隨這h5,c3,ES6的新特性，這是令人興奮的。'},
    {'en':'Advanced steps','cn':'進階的步子'},
    {'en':'Career has higher requirements, and ever-increasing mobile devices requirea good experience. The browser keeps updating and gradually reaching the specification,and new technologies are applied. This is a challenge for the old technology and a mustfor every front end.','cn':'職業有了更高的要求，不斷增加的移動裝置，更是需要良好的體驗。瀏覽器不停的更新並逐漸達到規範，新技術得以應用。這對舊技術是挑戰同時也是每一個前端都是必經之路。'},
    {'en':'Road resistance and length','cn':'道阻且長'},
    {'en':'At the same time, it is even more difficult for novices. The ever-increasing contentof ES6 requires a solid foundation of js, various framework principles, and countlesslibraries. However, the cool page presented to people\'s vision -the sense of accomplishment, gave me reasons to move forward.','cn':'同時對於新手，就更是不易。不斷增加的ES6內容，需要鞏固的js基礎，各種框架原理，還有數不清的類庫。但是，呈現給人們視野中的炫酷網頁——成就感，給了我前進的理由。'},
    {'en':'Stronger wings','cn':'羽翼漸豐'},
    {'en':'The deeper I learn, the more I know that I know less,and it has inspired my passion and interest in learning.Gradually have a general concept of the front end,the goal is more clear. Not impetuous, humbly learning, accumulate richly and break forth vastly.','cn':'學的越深入，越知道自己懂得少，更激發了我的學習熱情和興趣。逐漸對前端有了大體的概念，目標更明確。不浮躁，虛心學習，厚積而薄發。'},
    {'en':'Roast me','cn':'吐槽我吧'},
    {'en':'Foundation','cn':'基礎'},
    {'en':'Proficiency in English html,css,javascript','cn':'熟練應用html,css,javascript'},
    {'en':'Understand jQuery/Nodejs','cn':'瞭解jQuery/Nodejs'},
    {'en':'Understand basic web security issues','cn':'瞭解基本web安全問題'},
    {'en':'Understand semanticization','cn':'瞭解語義化'},
    {'en':'Understand common algorithms','cn':'瞭解常用演算法'},
    {'en':'Promotion','cn':'提升'},
    {'en':'Familiar with html5,css3','cn':'熟悉html5,css3'},
    {'en':'Understand ES6','cn':'瞭解ES6'},
    {'en':'Understand sass/less','cn':'瞭解sass/less'},
    {'en':'Learn about some browser compatibility issues','cn':'瞭解部分瀏覽器相容問題'},
    {'en':'Learn about some performance improvement issues','cn':'瞭解部分效能提升問題'},
    {'en':'Understand Vue and other mvvm framework','cn':'瞭解Vue等mvvm框架'},
    {'en':'Call me','cn':'聯絡我'}
  ]
 

接著就是邏輯上了，點選時如果當前語言為中文（cn）則遍歷langArr陣列，依次對應將文字節點的值替換，這就要求html帶有文字結構的順序必須和陣列的語言資料的順序是一致的。這樣才能通過遍歷通過對應的序號，替換值。然後替換完後，要把當前的語言狀態也修改了，當前為英文（en）。 

 // $(".langSwitch:eq(0)").text(langArr[0].flag);
  // var leng1 = $(".langSwitch").length;
  var leng2 = langArr.length;
  // console.log(leng2);
  // console.log(leng1);
  // console.log(langArr[0].en);
  // console.log($(".langSwitch:eq(0)").text());

  // 通過對應的文字節點遍歷轉換成對應的語言，flag為當前的語言
  $(".toggle-inner,.label-text").click(function () {
    if (flag == 'cn') {
      for (let i = 0; i < leng2; i++) {
        $(".langSwitch:eq(" + i + ")").text(langArr[i].en);
      }
      flag = 'en';
    } else {
      for (let j = 0; j < leng2; j++) {
        $(".langSwitch:eq(" + j + ")").text(langArr[j].cn);
      }
      flag = 'cn';
    }
    // console.log("after "+flag);
  });
 

如此一來，一個相對簡單的，語言切換就完成了，如圖。

你也可以移步到www.peanutone.com

網上也有其他比較複雜的方法，大多是後端操作，本文僅供參考。