ロストテクノロジーになりそうなので、このブログに記載します。
やったこと
- 切り替えボタンの『日本語』『English』（正確にはclass=jpSwitchとclass=enSwitch内の文字列）をクリックすると、該当するclassをshow、非該当classをhideします。
- クッキーを使ってフラグを保持する（jquery-cookie.jsを導入）
- クッキーのlangを見てNullであれば、デフォルトの言語（下記ソースコードでは日本語）を表示。
- おまけとして、jpSwitch、enSwitchにcursorを合わせるとpointerになります（指のヤツ）
結論から言えば、jQuery で多言語切り替えを（魔）改造したものです。ただ、私の場合、3-1.言語情報をセッションに保持にクッキーを使ってます。ほかは同じです。
index.html
<!-- 省略 -->
<body>
<!-- 切り替えボタン -->
<p><span class="jpSwitch">日本語</span> / <span class="enSwitch">English</span></p>
<div class="en">
<!-- 英語の記事 -->
</div>
<div class="jp">
<!-- 日本語の記事 -->
</div>
</body>
<!-- 省略 -->
changeLang.js
$(function () {
"use strict";
var lang = $.cookie("lang");
if(lang == null){
lang = "jp";
$.cookie("lang", lang, { path: "/" });
showLang(lang);
}else{
showLang(lang);
}
$(".jpSwitch").click(function (){
lang = "jp";
$.cookie("lang", lang, { path: "/" });
showLang(lang);
});
$(".enSwitch").click(function (){
lang = "en";
$.cookie("lang", lang, { path: "/" });
showLang(lang);
});
});
showLang.js
function showLang (lang){
var langSet = ["jp", "en"];
for (var i = 0, len = langSet.length; i < len; i++) {
if (lang === langSet[i]) {
$("."+langSet[i]).show();
} else {
$("."+langSet[i]).hide();
}
}
}
cursorChange.js（おまけ）
$(function (){
$(".jpSwitch").hover(function (){
$(this).css("cursor","pointer");
});
$(".enSwitch").hover(function (){
$(this).css("cursor","pointer");
});
});
コメントを残す