0

順序付けされていないリストを作成し、クリックするとスライドを変更するページャー付きのjQueryサイクルがあります。順序付けされていないリストを使用して、各スライドの関連テキストも表示/非表示にしようとしています。また、プロセスをさらに複雑にするために、スライドに関連付けられたテキストがない場合のデフォルトのテキストのセットがあります。

htmlは次のようになります。

<div class="slideshow">
  <img src="img1.png" />
  <img src="img2.png" />
  <img src="img3.png" />
</div>
<div class="slidetxt slide-3-text" style="display:none;">Text to appear with slide 3</div>
<div class="slidetxt slide-1-text">Text to appear with slide 1</div>
<div class="slidetxt defaultcontent" style="display:none;">This is the default text for the page.</div>

jQueryは次のようになります。

jQuery(document).ready(function() {
    jQuery('.slideshow')
    .after('<ul id="slidenav" />')
    .cycle({
        fx: 'fade',
        timeout: 0,
        pager: '#slidenav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"></a></li>';
        }
    });
    jQuery('#slidenav li a').click(function(){
        var index = jQuery(this).parent('li').index();
        index = index + 1;
        var slidetxt = ".slide-"+index+"-text";
        jQuery(".slidetxt").hide("slow", function(){
            if(jQuery(slidetxt).length){
                jQuery(slidetxt).show("slow");
            }else{
                jQuery(".defaultcontent").show("slow");
            }           
        });
    });
});

何らかの理由で、3番目のナビゲーションボタンをクリックすると常に正常に機能しますが、2番目のボタンをクリックすると常にデフォルトのテキストが表示され、すぐに非表示になってからもう一度表示されます。最初のナビゲーションボタンをクリックすると、正常に機能する場合と表示が実行される場合があります。ダンスを非表示/表示します。

jQueryが実際にアクションを完了する前にアクションを完了したと考えていることと関係があると思いますが、おそらくそれは私のずさんなコードです！:-)すべての助けは大歓迎です!! ありがとう。

4

1 に答える 1

1

.slidetxtダンスは、要素ごとに1回実行されるhideコールバックによって引き起こされます。

これはjQuery.when(jQuery('.slidetxt').hide('slow').done(function(){...})、すべての非表示が完了したときにコールバックを1回実行するを使用することで解決できます。

ナビゲーションリンクに追加のクリックハンドラーをアタッチする代わりに、サイクルbeforeとafterオプションを利用することもできます。

全体は、元のコードに対してかなり軽いmodであり、次のようになります。

jQuery(document).ready(function() {
    $slidetxt = jQuery(".slidetxt");
    $defaultcontent = jQuery(".defaultcontent");
    jQuery('.slideshow').after('<ul id="slidenav" />').cycle({
        fx: 'fade',
        timeout: 0,
        pager: '#slidenav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#">' + (idx + 1) + '</a></li>';
        },
        before: function() {
            $slidetxt.hide("slow");
        },
        after: function(currSlideElement, nextSlideElement) {
            var index = 1 + jQuery(nextSlideElement).index();
            var $s = jQuery(".slide-" + index + "-text"); 
            jQuery.when($slidetxt.hide("slow")).done(function() {
                if ($s.length) {
                    $s.show("slow");
                }
                else {
                    $defaultcontent.show("slow");
                }
            });
        }
    });
});

働くフィドルを見る

于 2012-04-08T19:26:16.043 に答える