JavaScriptでサイトの言語切り替え #JavaScript

新しく書き直しました
JavaScriptでサイトの言語切り替え2

今回はサイトを再読み込みせずに言語を切り替えたい！
と思ったので実際に作りました。

自分で好きな言語を登録し、
読み込みは無しで切り替えが可能です

test.com/#言語

このような形になるのですが、登録されて居ない言語の場合は
動作しませんので、GETなどもいままで通り使えます

使い方やソースを載せますが、詳しい解説はしません。
また暇なときに編集して解説するかも

すぐに使いたい人は一番最後の まとめ に GO!

言語を登録

まず言語を登録します

今回は Japanese, English, Chinese, Korean
を登録します。

HTML

<html>
  <head>
  </head>
  <body>
    <language initial="en" lang="ja,en,ch,kr"></language>
  </body>
</html>

initialは初めてサイト読み込んだ時に表示させる言語です。
test.com/ ←指定してない場合も

登録する名前はなんでもいいです。

langは test.com/#言語 ←ここの言語の表示名です

複数言語のHTMLを書く

簡単です。

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を貼ります。
もしかしたらここら辺に解説入れるかも

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

<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>

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);
});