5

2つの言語でコンテンツを掲載したウェブサイトを作りたいです。言語の切り替えにjQueryを使用したい。私の考えはこれです：

HTMLページに実際のコンテンツを含める代わりに：

<div>Hello there</div>

クラスを使いたい：

HTML：

<div class="hello_EN"></div>

JS（私はJSが得意ではありません。理解できるように、いくつかのPHPと組み合わせました）：

var EN = new array('hello_EN' => 'Hello there');
foreach($EN as $class => $content)
$(".$class").text("$content"); //this should populate all my HTML classes with its content

次に、2番目の言語配列が必要です。

var RO = new array('hello_RO' => 'Salut');

さて、切り替え：

$("#change_to_RO").click(function() {
       $(EN).replaceWith(RO);
});

これにどのようにアプローチすればよいですか？ありがとう。

4

2 に答える 2

7

JavaScriptからこれにアプローチしないのがおそらく最善です。そうは言っても、学術的および学習的な演習として、ここにあなたがこのようなことをどのように行うことができるかについての大まかな考えがあります：

<select id="lang">
    <option>English</option>
    <option>Portuguese</option>
    <option>Russian</option>
</select>
<span data-translate="_hello">Hello</span>, 
<span data-translate="_january">January</span>!​

// Some variables for later
var dictionary, set_lang;

// Object literal behaving as multi-dictionary
dictionary = {
    "english": {
        "_hello": "Hello",
        "_january": "January"
    },
    "portuguese": {
        "_hello": "Oie",
        "_january": "Janeiro"
    },
    "russian": {
        "_hello": "привет",
        "_january": "январь"
    }
};

$(function () {

    // Lets be professional, shall we?
    "use strict";

    // Function for swapping dictionaries
    set_lang = function (dictionary) {
        $("[data-translate]").text(function () {
            var key = $(this).data("translate");
            if (dictionary.hasOwnProperty(key)) {
                return dictionary[key];
            }
        });
    };

    // Swap languages when menu changes
    $("#lang").on("change", function () {
        var language = $(this).val().toLowerCase();
        if (dictionary.hasOwnProperty(language)) {
            set_lang(dictionary[language]);
        }
    });

    // Set initial language to English
    set_lang(dictionary.english);

});​

フィドル： http： //jsfiddle.net/MBRG4/5/

于 2012-11-17T04:59:09.213 に答える
0

私がやる小さなアプリのために素晴らしい言語を切り替えるための解決策をDaysで検索しました。
だからSEOフレンドリーあなたの友人は言った。ああ、そうだ！私はhtmlに両方の言語を持っているので、それは十分にロードされています。言語をクラスで切り替えます（つまり、このスイッチャーはJSなしで最初に機能しました） 

<style>  
   div.de,  :lang(de) {  display: none;  }   
</style>


<!-- Javascripts -->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>


</head>   
<body  > 


<button id="german">German</button>
<button id="english">English</button>


<br><br>

<a href="" lang="de">de</a>
<a href="" lang="en">en</a>

<p lang="de">Deutscher Text</p>
<p lang="en">Englischer Text</p>

<div class="de">Deutsches Div</div> 
<div class="en">Englisches Div</div>

<div class="de"> <iframe width="560" height="315" src="http://www.youtube.com/embed/ZQL7d3k_yh0" frameborder="0" allowfullscreen></iframe>  </div>
<div class="en"> <iframe width="560" height="315" src="http://www.youtube.com/embed/NWfbtFpnCM4" frameborder="0" allowfullscreen></iframe>  </div>


<hr>


<script>
  $( "#german" ).click(function() {
    $("#german").attr('id','notactive')  
      $(".en, :lang(en)").fadeOut('slow', function(){
        $(".de, :lang(de)").fadeIn('slow');
      });  
  });

  $( "#english" ).click(function() {
    $("#english").attr('id','notactive')  
      $(".de, :lang(de)").fadeOut('slow', function(){
        $(".en, :lang(en)").fadeIn('slow');
      });  
  });    

</script>
于 2014-03-18T11:52:30.857 に答える