-1

我正在使用翻转 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;}
4

1 回答 1

0

我认为您的问题出在这一行

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

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

于 2013-04-26T23:08:26.723 回答