jQuery显示/隐藏重复舞蹈

我有一个带有寻呼机的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(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(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");
                }
            });
        }
    });
});

要与幻灯片3一起显示的文本
要与幻灯片1一起显示的文本
这是页面的默认文本。

jQuery如下所示：

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

jQuery（文档）.ready（函数（）{
jQuery（“.slideshow”）
。之后（“
”）
.自行车({
外汇：“淡出”，
超时：0，
传呼机：“#slidenav”，
pagerAnchorBuilder:函数（idx、幻灯片）{
返回“
”；
}
});
jQuery（'#slidenav li a'）。单击（函数（）{
var index=jQuery（this.parent（'li'）.index（）；
指数=指数+1；
var slideText=“.slide-”+索引+“-文本”；
jQuery（“.slideText”）.hide（“慢”，函数（）{
if（jQuery（slideText）.length）{
jQuery（slideText.show（“slow”）；
}否则{
jQuery（“.defaultcontent”）.show（“slow”）；
}           
});
});
});

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

---

我猜这与jQuery认为它在真正完成操作之前就完成了操作有关，但可能只是我的代码太草率了！：-）我们将非常感谢您的帮助！！谢谢。

该舞蹈是由隐藏回调在每个

.slideText

元素中运行一次引起的

这可以通过使用

jQuery.when（jQuery（'.slidetxt'）.hide（'slow'）.done（function（）{…}）

来克服，它在所有隐藏完成后运行回调一次

您还可以利用Cycle的之前和之后的选项，而不是在导航链接上附加一个额外的点击处理程序

整个过程是对原始代码的一个相当轻的修改，如下所示：

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

jQuery（文档）.ready（函数（）{
$slidetxt=jQuery（“.slidetxt”）；
$defaultcontent=jQuery（“.defaultcontent”）；
jQuery（'.slideshow'）。之后（'
）。循环({
外汇：“淡出”，
超时：0，
传呼机：“#slidenav”，
pagerAnchorBuilder:函数（idx、幻灯片）{
返回“
”；
},
before:function（）{
$slideText.hide（“慢”）；
},
之后：函数（currSlideElement、nextSlideElement）{
var index=1+jQuery（nextSlideElement）.index（）；
var$s=jQuery（“.slide-”+index+“-text”）；
jQuery.when（$slideText.hide（“slow”））.done（function（）{
如果（$s.length）{
$s.show（“慢”）；
}
否则{
$defaultcontent.show（“慢”）；
}
});
}
});
});

---

请看“工作”

太棒了！非常感谢。这就像一个绝对的梦想。感谢你花时间帮助我解决这个问题！不用担心@user1320529。知道这一点太好了。页面上的某个地方有一个链接/按钮，你可以指定我的答案为已接受。Muchas'，in advanceAh，是的，谢谢，我找到了它！我花了一些时间请仔细阅读您的代码，并感谢您不仅解决了我的问题，而且还以优雅的方式解决了我的问题，并帮助我从过程中学习。这超出了我的要求，我非常感激！