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点击事件处理程序中的一些错误。

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

主要事件处理程序中的选择器涵盖的内容超出了您的需求。例如，$（“。flipbox”）选择包含“flipbox”类的文档中的所有元素，而不仅仅是用于事件引发元素的子元素。

我希望它再次翻转相册，但它不会

“content”param应该包含在函数中，在你的情况下有一个jquery元素数组而不是函数。

看起来我的英语确实失败了，抱歉：＆gt;

这里是正在进行的例子。

$('.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;
});

用链接翻转Div

1 个答案: