Question

我正在使用flip jquery插件。

我有专辑封面和查看专辑歌曲列表的链接。当我点击“查看歌曲列表”链接时，我想翻转专辑封面以查看歌曲列表。同时，我想将“查看歌曲列表”链接更改为“查看专辑封面”。当用户点击“查看专辑封面”链接时，专辑应该再次翻到前面并显示艺术并更改“查看专辑封面”链接以再次阅读“查看专辑封面”。这很好用。

现在，当我再次点击“查看歌曲列表”链接时，我希望同样的事情再次发生 - 翻过专辑。但它不起作用。有什么想法吗？

在这里 - 看到包含专辑封面的底部框： http://maplemountainchorus.org/mandy/index2.html

这是我的代码：

$(function(){

$(".flipPad a.viewSongList").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('');
            $(this).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>

这是CSS：

.flipbox{width:236px;height:237px;float:left;}
.flipbox.winterWonderland{background:url('../images/music-winter-wonderland.jpg') no-  repeat;}
.flipbox.sweetDreams{background:url('../images/music-sweet-dreams.jpg') no-repeat;}
.flipbox.rightCry{background:url('../images/music-right-cry.jpg') no-repeat;}
.flipbox.platinum{background:url('../images/music-platinum.jpg') no-repeat;}
.flipbox.patsy{background:url('../images/music-patsy.jpg') no-repeat;}
.flipbox.mandy{background:url('../images/music-mandy.jpg') no-repeat;}
.flipbox.removeBkgrnd{background-image:none;background-color:#fff;border:1px solid red;width:236px;height:237px;}
.flipPad{float:left;padding-left:4.8em;}

Answer 1

我认为你的问题就在这一行

$(this).removeClass("viewAlbumArt").html('View Song List');

此处$(this)指的是$(".flipbox")而不是$(".flipPad a.viewSongList")所以此事件 $(".flipPad a.viewSongList.viewAlbumArt")总是在以后执行。

单击时重新运行功能

1 个答案: