引導切換語言

Question

我有兩種語言的博客。我想在單擊FlagA.png或FlagB.png時在語言A和B之間切換。每篇文章至少包含兩個標誌圖像。我如何使用（bootstrap）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。