ショートコードでjQueryを使用した簡単な変更言語の実装

Question

jQueryで非常に単純なMUIを実装しようとしています。いくつかのプラグインを試しましたが、すべてが特定のID、クラス名またはデータ属性を持つタグ内の言語を変更しています。私は{％translateme％}のようなショートコードでインターフェイスを翻訳する必要があります。

<div>{%projects%}</div> 
<input type="text" placeholder="{%tasks%}"/> 
<div><a href="#" id="en">English</a> | <a href="#" id="fr">French</a></div> 

そして、私のjQueryのは、次のとおりです：

私が使用していますHTMLコードは、デフォルトで

var english = { 
    "projects": "Projects", 
    "tasks": "Tasks", 
}; 

var french = { 
    "projects": "Projets", 
    "tasks": "Tâches", 
}; 

$(document).ready(function() { 
    $("#en").click(function(){ 
      console.log('changeLanguage English'); 
     //changeLanguage function 
    }); 
}); 
$(document).ready(function() { 
    $("#fr").click(function(){ 
      console.log('changeLanguage French'); 
     //changeLanguage function 
    }); 
}); 

は、私は、可能な場合は、英語をロードする必要があります。

ここjsFiddle上の例を見つけてください。事前にあなたの助けをhttps://jsfiddle.net/g1hpkphg/2/

感謝を。

Answer 1

「ショートコード」は、通常、テンプレートエンジンに行われるように置換できるテキストの一部ではなく、DOMへの単なるテキストノードです。

この違いがあるため、これらの翻訳可能な部分をDOMに見つける方法を定義する必要があります。またDOMの場合、最小の部分はノードです。したがって、テキストの翻訳可能な部分を定義するために、いくつかのノード（htmlタグを見つけるのが最も簡単です）を使用すると、タスクを解決するのに役立ちます。たとえば、例を使用してみることができます。 <span data-locale="projects">Projects</span>その後、あなたが何かを行うことができるようになります：data-などの属性を持つspan私の例ではlocalesを

$('[data-locale]').each(function(){ 
    var $this = $(this); 
    $this.text(locales[locale][$this.data('locale')]); 
}) 

は、値としてキーとローカライズされた文字列などのロケール識別子を持つオブジェクトです。 localeは現在のロケールの識別子です。異なるロケールの異なる変数にアクセスする場合と比較して、操作が簡単になります。