Question

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

Answer 1

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

对于要切换的所有内容，您必须为其提供相关的语言课程。在下面的示例中，我给了标题，国家标志和帖子描述一个语言类。
单击时，使用单击功能可以切换每个语言类的内容。在此示例中，我使用$(this).parent限制每个帖子的切换，因此您可以使用一种语言阅读一篇文章，而使用其他语言阅读另一篇文章。
然后，您还可以在每个切换中实施回调，以在切换完成后显示其他语言。

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

Bootstrap切换语言

1 个答案: