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