1

だから、これをチェックしてください： http://maplemountainchorus.org/mandy/index2.html

「View Song List」リンクをクリックすると、アルバム カバーが裏返されて、アルバムの曲のリストが表示されます。リンクの名前が「View Album Art」に変わります。「View Album Art」リンクをクリックすると、アルバムが裏返され、前面が再び表示されます。リンクの名前が「View Song List」に戻ります。

ここで、[曲のリストを表示] リンクをもう一度クリックします。アルバムをもう一度ひっくり返したいのですが、そうではありません。これを修正する方法を知っている人はいますか？

また、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>
4

1 に答える 1

2

a.viewSongList クリック イベント ハンドラのいくつかのバグを修正する必要があります。

また、div 内の他の「非表示」アルバムにもフリップ アニメーションが表示されます。

メインイベントハンドラーのセレクターは、必要以上のものをカバーしました。たとえば、$(".flipbox") は、イベントが発生した要素の子要素だけでなく、"flipbox" クラスを含むドキュメント内のすべての要素を選択します。

アルバムをもう一度ひっくり返したいのですが、そうではありません

「コンテンツ」パラメータは関数でラップする必要があります。あなたの場合、関数の代わりにjquery要素の配列があります。

私は英語で本当に失敗しているようです、ごめんなさい: >

ここに作業例があります。

$('.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;
});
于 2013-04-27T22:57:09.093 に答える