Question

我有一个带有寻呼机的jQuery Cycle，可以创建一个无序列表，当点击它时，会更改幻灯片。我试图使用无序列表来显示/隐藏每个幻灯片的相关文本。并且，为了进一步使过程复杂化，当没有与幻灯片关联的文本时，有一组默认文本。

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");
            }           
        });
    });
});

出于某种原因，点击第三个导航按钮总是工作正常但点击第二个按钮总是显示默认文本，然后立即隐藏它然后再次显示它并点击第一个导航按钮有时可以正常工作表演/隐藏/表演舞蹈。

我猜这与jQuery有关，认为它已经完成了它之前的动作，但也许它只是我的草率代码！ :-)所有帮助将不胜感激!!感谢。

Answer 1

舞蹈是由每个.slidetxt元素运行一次的隐藏回调引起的。

这可以通过使用jQuery.when(jQuery('.slidetxt').hide('slow').done(function(){...})来克服，before在所有隐藏已经完成时运行其回调。

您还可以利用Cycle的after和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"); } }); } }); });选项，而不是将其他点击处理程序附加到导航链接。

整个事情对原始代码来说是一个相当轻松的模式，看起来像这样：

{{1}}

见工作fiddle

jQuery显示/隐藏重复舞蹈

1 个答案: