Bootstrap 切换语言

Question

我有一个使用两种语言的博客。单击 FlagA.png 或 FlagB.png 时，我想在语言 A 和 B 之间切换。每个帖子至少包含两个标志图像。如何使用（引导）Jquery 做到这一点？ （上下文，我没有数据库，为了方便多语言我想使用切换功能）

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

Answer 1

您可以通过以下方法做到这一点：

1. 对于您要切换的所有内容，您必须为其提供相关的语言类。在下面的示例中，我为标题、国家/地区标志和帖子描述指定了一个语言类。
2. 使用单击功能在单击时切换每个语言类别的内容。在此示例中，我使用 $(this).parent 将切换限制在每个帖子上，这样您就可以阅读一种语言的帖子和另一种语言的帖子。
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 is here.