twitter-bootstrap Bootstrap 切换语言

Bootstrap toggle languages

提问by Danny

I have a blog in two languages. i want to toggle between language A and B when clicking FlagA.png or FlagB.png. Every post contains at least two flags images. How can I do this using (bootstrap) Jquery? (context, I dont have a DB, in order to facilitate multi languages I want to make use of the toggle functions)

我有两种语言的博客。我想在单击 FlagA.png 或 FlagB.png 时在语言 A 和 B 之间切换。每个帖子至少包含两个标志图像。我如何使用（引导程序）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>

采纳答案by mccannf

You can do this by the following method:

您可以通过以下方法执行此操作：

1. For all the content you want to toggle, you must give it the relevant language class. In the example below, I gave the title, country flag and post description a language class.
2. Use the click function to toggle the content with each language class when clicked. In this example, I limit the toggle to each post by using $(this).parentso you could read one post in one language and another in a different language.
3. Then you also implement a callback in each toggle to show the other language when the toggle has completed.

1. 对于要切换的所有内容，必须为其指定相关的语言类。在下面的示例中，我为标题、国家/地区国旗和帖子描述提供了一个语言类。
2. 使用单击功能在单击时切换每个语言类的内容。在这个例子中，我通过使用来限制每个帖子的切换，$(this).parent这样你就可以阅读一种语言的帖子和另一种不同语言的帖子。
3. 然后，您还在每个切换中实现一个回调，以在切换完成时显示另一种语言。

Here is the HTML:

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

And then the following JavaScript will toggle the language:

然后以下 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 is here.

JSFiddle 在这里。