1

所以，看看这个： 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>
4

1 回答 1

2

您需要修复 a.viewSongList click 事件处理程序中的一些错误。

此外，翻转动画显示在 div 中的其他“隐藏”专辑中。

您在主事件处理程序中的选择器涵盖的内容超出了您的预期。例如，$(".flipbox") 选择文档中包含“flipbox”类的所有元素，而不仅仅是事件导致元素的子元素。

我想让它把专辑翻过来，但它没有

“内容”参数应该包含在函数中，在您的情况下，有一个 jquery 元素数组而不是函数。

看起来我的英语真的很失败，对不起：>

下面是工作示例。

$('.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;
});
于 2013-04-27T22:57:09.093 回答