0

我有一个带有寻呼机的 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 有关，认为它在真正完成之前已经完成了操作，但也许这只是我的草率代码！:-) 所有帮助将不胜感激！谢谢。

4

1 回答 1

1

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

这可以通过使用来克服，jQuery.when(jQuery('.slidetxt').hide('slow').done(function(){...})当所有隐藏完成时，它会运行一次回调。

您还可以利用 Cycle 的before和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");
                }
            });
        }
    });
});

见工作小提琴

于 2012-04-08T19:26:16.043 回答