ATTR + JS 語系切換

原理

  1. 把其他語言 + 本來的語言存在屬性 attr 裡面
  2. 用 JS 的 dataset 將文字改為屬性的資料

範例

h3(data-en="Languages Changing", data-jp="言語を選択", data-ch="語系切換") Languages Changing
p(data-en="some text", data-jp="テキストです", data-ch="一段文字") some text
button#ch CH
button#en EN
button#jp JP
//選取有文字的元素
var texts=document.querySelectorAll("[data-en]");

//轉換語言函數
function changeLang(par,lan){
 par.innerHTML=lan;
}

document.querySelector("#ch").addEventListener("click",
 function(){
 texts.forEach(text => changeLang(text,text.dataset.ch));
 }
)

document.querySelector("#jp").addEventListener("click",
 function(){
 texts.forEach(text => changeLang(text,text.dataset.jp));
 }
)

document.querySelector("#en").addEventListener("click",
 function(){
 texts.forEach(text => changeLang(text,text.dataset.en));
 }
)

Display

Languages Changing

some text

Leave a Reply

Your email address will not be published. Required fields are marked *