新しく書き直しました
JavaScriptでサイトの言語切り替え2
今回はサイトを再読み込みせずに言語を切り替えたい！
と思ったので実際に作りました。
自分で好きな言語を登録し、
読み込みは無しで切り替えが可能です
test.com/#言語
このような形になるのですが、登録されて居ない言語の場合は
動作しませんので、GETなどもいままで通り使えます
使い方やソースを載せますが、詳しい解説はしません。
また暇なときに編集して解説するかも
すぐに使いたい人は一番最後の まとめ に GO!
##言語を登録
まず言語を登録します
今回は Japanese, English, Chinese, Korean
を登録します。
<html>
<head>
</head>
<body>
<language initial="en" lang="ja,en,ch,kr"></language>
</body>
</html>
initialは初めてサイト読み込んだ時に表示させる言語です。
test.com/ ←指定してない場合も
登録する名前はなんでもいいです。
langは test.com/#言語 ←ここの言語の表示名です
##複数言語のHTMLを書く
簡単です。
<div class="lang" language="ja">日本語</div>
<div class="lang" language="en">英語</div>
<div class="lang" language="ch">中国語</div>
<div class="lang" language="kr">韓国語</div>
<a class="lang" language="ja">どのタグでも使えます</a>
<style class="lang" language="ja">日本用のCSSとかファイルとか</style>
言語を切り替えるボタンは
<a class="language" href="#ja">日本語に切り替え</a>
<a class="language" href="#en">英語に切り替え</a>
以上です。
URLに #ja が指定されている場合、
日本語以外のHTMLは全て非表示になります。
タグであればなんでも使えるので、
「このリンクはこの国だけに！！」
「おま国発動！！！」
とかでもできます。
##JavaScript
じゃあ最後にJavaScriptを貼ります。
もしかしたらここら辺に解説入れるかも
let Language,langdata;
$(window).on("load", function(){
Language = $("language").attr("initial");
langdata = $("language").attr("lang").split(",");
langmain(0);
});
function langmain(time){
this.main = function(){
url = location.href;
if(url.match("#")){
for(i in langdata){
if(langdata[i].indexOf(url.split("#")[1]) >= 0){
Language = url.split("#")[1];
$(".lang").each(function(i) {
lang = $(this).attr("language");
if(lang == Language) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
} else {
$(".lang").each(function(i) {
lang = $(this).attr("language");
if(lang == Language) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
setTimeout(this.main, time);
}
$(".language").on("click", function(){
langmain(500);
});
ちょろっとだけ
langmain関数が時間差動作にしている理由は
URLが切り替わる時間と、切り替えるボタンを押された時間が順番逆だからです。
して欲しいのは
ボタン「押されたよ！！」
JS「URLみて言語切り替えるよ！！」
なのに
JS「URLみて言語切り替えるよ！！」
ボタン「いま押されたよ！！早いよ！！！」
になっちゃうからです。ほんとくそ
##まとめ
<html>
<head>
</head>
<body>
<language initial="en" lang="ja,en,ch,kr"></language>
<div class="lang" language="ja">日本語</div>
<div class="lang" language="en">英語</div>
<div class="lang" language="ch">中国語</div>
<div class="lang" language="kr">韓国語</div>
</body>
</html>
let Language,langdata;
$(window).on("load", function(){
Language = $("language").attr("initial");
langdata = $("language").attr("lang").split(",");
langmain(0);
});
function langmain(time){
this.main = function(){
url = location.href;
if(url.match("#")){
for(i in langdata){
if(langdata[i].indexOf(url.split("#")[1]) >= 0){
Language = url.split("#")[1];
$(".lang").each(function(i) {
lang = $(this).attr("language");
if(lang == Language) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
} else {
$(".lang").each(function(i) {
lang = $(this).attr("language");
if(lang == Language) {
$(this).show();
} else {
$(this).hide();
}
});
}
}
setTimeout(this.main, time);
}
$(".language").on("click", function(){
langmain(500);
});