JavaScript實現--中英語言切換功能

最近弄的項目是面向國際的,因此老總說要有語言切換功能.第一感受好像不難吧css

網上查了下,感受實現方法就2種:html

一:2個版本的HTML.至於怎麼切換,方法也不少.函數

    不過這種方法,除了笨,我實在不知道用什麼詞來形容.spa

二:雙重標籤,一箇中文一個英語,以後用css來控制DOM的display,從而來判斷顯示那種語言.翻譯

<p id="E">English</p>
<p id="Z">中文</p>


 document.getElementById('E').style.display = "block"
 document.getElementById('Z').style.display = "none"

    這種方法,雖然好像不錯,不過當頁面多了,之後很差管理,也會形成頁面的臃腫.code


因此到頭來仍是本身搞吧.既然我那麼喜歡JavaScript,爲啥不用JavaScript來實現呢.htm

其實,原理也不難,傳2個參數,一個是英文文本,一個是中文文本,以後判斷一個全局變量來決定是中譯英仍是英譯中.ip

直接上代碼先:字符串

function instead_of_language(oldLan, newLan) {
    var temp,
        all = document.querySelectorAll(".change_lan");
    if (change_lan_Z == 0) {
        temp = newLan;
        newLan = oldLan;
        oldLan = temp;
    }
    for (i = all.length; i--;) {
        if (all[i].getAttribute("placeholder") == oldLan) {
            all[i].setAttribute("placeholder", newLan);
        }
        if (all[i].innerHTML == oldLan) {
            all[i].innerHTML = newLan;
        }
        if (all[i].value == oldLan) {
            all[i].value = newLan;
        }
    }

}

用法:get

//HTML                         
 <span class="change_lan">Update</span>      //  給翻譯的標籤加上class值"change_lan"
 
//JavaScript 
 var change_lan_Z = 0;                      //   change_lan_Z等於1時爲中譯英  等於0時爲英譯中
 instead_of_language("Update", "更新");     //    判斷的是字符串,因此包括空格或者符號都要加上去

這也是剛剛纔寫的函數,還不是很完善,目前只是支持翻譯標籤的文本和input的placeholder屬性.

若是各位有發現什麼好的改進  或者是BUG的話,歡迎指導批評

相關文章
相關標籤/搜索