2

私は 2 つの言語でブログを書いています。FlagA.pngまたはFlagB.pngをクリックしたときに言語AとBを切り替えたい。すべての投稿には、少なくとも 2 つのフラグの画像が含まれています。(ブートストラップ) Jquery を使用してこれを行うにはどうすればよいですか? （コンテキスト、私はDBを持っていません。多言語を容易にするために、トグル機能を利用したいです）

                    <div class="post">
                    <div class="post-content">
                        <div class="post-title"><a href="#"><b>title</b</a>                </div>
                        <a href="" class="languageA">
                                <img src="img/countryA.png" alt=""
                                    style="float: right;" /></a>
                        <a href="" class="languageB">
                                <img src="img/countryB.png"  alt="" style="float: right;
                                    padding-right: 10px;" /></a>
                        </br>
                        <div class="post-description">
                        <p>
                            post in language A
                        </p>
                        </div>
                        <div class="post-description">

                        <p>
                            post in language B but now it is invisible, when pressed countryB image this becomes visible and post in language A not.
                        </p>
                        </div>
                    <p class="test"> test test test test test test test test test test test test</p>
                   </div>
                   <div class="post">
                   <!-- second post\-->
                   </div>
                   <!-- -->
                   <script type="text/jscript">
                  $(function() {
        $('.languageA').click(function () {
            $('.test').collapse({
                toggle: true
            })
        });
    });
                   });
                   </script>
4

1 に答える 1

1

これは、次の方法で実行できます。

  1. 切り替えたいすべてのコンテンツについて、関連する言語クラスを指定する必要があります。以下の例では、タイトル、国旗、投稿の説明に言語クラスを付けました。
  2. クリック機能を使用して、クリックしたときに各言語クラスのコンテンツを切り替えます。この例では、を使用してトグルを各投稿に制限し、$(this).parentある言語で1つの投稿を読み、別の言語で別の投稿を読むことができるようにします。
  3. 次に、各トグルにコールバックを実装して、トグルが完了したときに他の言語を表示します。

HTMLは次のとおりです。

<div class="post">
    <div class="post-content">
      <div class="post-title languageA"><a href="#"><b>Title 1 in Language A</b></a></div>
      <div class="post-title languageB"><a href="#"><b>Title 1 in Language B</b></a></div>
        <a href="#" class="languageA">
          <img src="http://flags.redpixart.com/img/united_states_of_america_preview.gif" alt=""
          style="float: right;" /></a>
        <a href="#" class="languageB">
          <img src="http://flags.redpixart.com/img/spain_preview.gif"  alt="" style="float: right;
                                    padding-right: 10px;" /></a>
      <br/>
      <div class="post-description languageA">
        <p>
          Post 1 in language A
        </p>
      </div>
      <div class="post-description languageB">
        <p>
          Post 1 in language B
        </p>
      </div>
      <p class="test"> test test test test test test test test test test test test</p>
    </div>
</div>

そして、次のJavaScriptが言語を切り替えます。

$(function() {
   // Hide Language B when the web page loads
   $('.languageB').hide();
   $('.languageA').click(function () {
       // find all content with .languageA under the div post-content and hide it
       $(this).parent().find('.languageA').fadeToggle('slow',function() {
             // find all content with .languageB under the div post-content and show it
             $(this).parent().find('.languageB').show();});
   });
   $('.languageB').click(function () {
       // find all content with .languageB under the div post-content and hide it
       $(this).parent().find('.languageB').fadeToggle('slow',function() {
             // find all content with .languageA under the div post-content and show it
             $(this).parent().find('.languageA').show(); });
   });
});

JSFiddleはこちらです。

于 2013-01-13T22:00:14.577 に答える