翻轉一個DIV在一個鏈接

Question

所以，檢查了這一點： http://maplemountainchorus.org/mandy/index2.html

點擊「查看歌曲列表」鏈接，專輯封面翻轉過來展示一下將歌曲的專輯列表。該鏈接的名稱更改爲「查看專輯封面」。點擊「查看專輯封面」鏈接，相冊翻轉以再次顯示封面。該鏈接的名稱將更改回「查看歌曲列表」。

現在，再次單擊「查看歌曲列表」鏈接。我想讓它再次翻轉專輯，但它沒有。任何人都知道我可以解決這個問題？

此外，翻轉動畫顯示在div中的其他「隱藏」相冊中。有誰知道如何解決這個問題呢？

這裏是我的jQuery：

$(function(){ 

$(".flipPad a.viewSongList").bind("click",function(){ 
$(".flipbox").flip({ 
     direction: 'lr', 
     color: '#fff', 
     content: $(".flipbox").addClass("removeBkgrnd").html('<p>Here is the song list.</p>'), 
     onBefore: function(){$(".flipPad a.viewSongList").html('View Album Art').addClass("viewAlbumArt")}, 
     onEnd: function(){$(".flipPad a.viewSongList.viewAlbumArt").click(function(){ 
      $(".flipbox").removeClass("removeBkgrnd").html(''); 
      $(".flipPad a.viewSongList").removeClass("viewAlbumArt").html('View Song List'); 

     }); 
     } 
    }) 
    return false; 

}); 

這裏是我的HTML：

<section id="media"> 
    <div id="buyMusic"> 
     <div id="musicSlider" class="flexslider" style="background-color:#000;"> 
       <ul class="slides"> 
       <li> 
        <div class="flipbox sweetDreams"></div> 
        <div class="flipPad"> 
        <a href="#" class="viewSongList">View Song List</a> 
        </div>  
       </li> 
       <li> 
        <div class="flipbox winterWonderland"></div> 
        <div class="flipPad"> 
        <a href="#" class="viewSongList">View Song List</a> 
        </div>  
       </li> 
       <li> 
        <div class="flipbox rightCry"></div> 
        <div class="flipPad"> 
        <a href="#" class="viewSongList">View Song List</a> 
        </div>  
       </li> 
       <li> 
        <div class="flipbox mandy"></div> 
        <div class="flipPad"> 
        <a href="#" class="viewSongList">View Song List</a> 
        </div>  
       </li> 
       <li> 
        <div class="flipbox platinum"></div> 
        <div class="flipPad"> 
        <a href="#" class="viewSongList">View Song List</a> 
        </div>  
       </li> 
       <li> 
        <div class="flipbox patsy"></div> 
        <div class="flipPad"> 
        <a href="#" class="viewSongList">View Song List</a> 
        </div>  
       </li> 
       </ul> 
     </div> 
     <div id="musicSliderNav" class="flexslider"> 
       <ul class="slides"> 
       <li> 
        <img src="images/music-sweet-dreams.jpg"/> 
       </li> 
       <li> 
       <img src="images/music-winter-wonderland.jpg"/> 
       </li> 
       <li> 
        <img src="images/music-right-cry.jpg"/> 
       </li> 
       <li> 
       <img src="images/music-mandy.jpg"/> 
       </li> 
       <li> 
        <img src="images/music-platinum.jpg"/> 
       </li> 
       <li> 
       <img src="images/music-patsy.jpg"/> 
       </li> 
       </ul> 
     </div> 
    </div> 
    </section> 

Answer 1

你需要在a.viewSongList Click事件處理程序來修復一些bug。

此外，翻轉動畫顯示在div中的其他「隱藏」相冊中。

您在主事件處理程序中的選擇器覆蓋超過您想要的。例如，$（「。flipbox」）選擇包含「flipbox」類的文檔中的所有元素，而不僅僅是由事件引起的元素的子元素。

我希望它翻轉專輯一遍又一遍，但它並不

「內容」參數應該被包裹在功能，你的情況有jQuery的元素，而不是功能的陣列。

貌似我真的很失敗，英語，不好意思：>

到這裏工作excample。

$('.flipPad a.viewSongList').attr('currentContent', 'art') 
$('.flipPad a.viewSongList').click(function() { 
    var that = this; 
    var currentContent = $(that).attr('currentContent'); 
    var flipbox = $(that).parent().parent().find('.flipbox'); 
    var albumData = flipbox.find('.albumData'); 
    $(flipbox).flip({ 
     direction: 'lr', 
     color: '#fff', 
     content: function() { 
      if(currentContent == 'art') { 
       $(flipbox).addClass('removeBkgrnd'); 
       $(albumData).show(); 
      } else { 
       $(flipbox).removeClass('removeBkgrnd'); 

      }     
     }, 
     onEnd: function() { 
      if(currentContent == 'art') { 
       $(that).addClass('viewAlbumArt').html('View Album Art'); 
       $(albumData).show(); 
       $(that).attr('currentContent', 'songList'); 
      } else { 
       $(that).removeClass('viewAlbumArt').html('View Song List'); 
       $(albumData).hide(); 
       $(that).attr('currentContent', 'art'); 
      } 
     } 
    }); 
    return false; 
});