-1

私はフリップjqueryプラグインを使用しています。

アルバム カバーと、アルバムの曲リストを表示するためのリンクがあります。「曲のリストを表示」リンクをクリックすると、アルバム カバーをめくって曲のリストを表示したいと考えています。同時に、「曲リストの表示」リンクを「アルバム アートの表示」に変更したいと考えています。ユーザーが [アルバム アートの表示] リンクをクリックすると、アルバムが再び前面に反転してアートが表示され、[アルバム アートの表示] リンクが [曲リストの表示] に変更されます。これは正常に動作します。

ここで、[View Song List] リンクをもう一度クリックすると、同じことが何度も繰り返されると予想されます。つまり、アルバムがめくられます。しかし、うまくいきません。何か案は？

ここにあります - アルバム カバーの下のボックスを参照してください: 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');

here$(this)は参照し$(".flipbox")、そうではない$(".flipPad a.viewSongList")ため、このイベント $(".flipPad a.viewSongList.viewAlbumArt")は常に後で実行されます。

于 2013-04-26T23:08:26.723 に答える