javascript - 不知道为什么我的循环函数在这里不起作用

Question

我为一个网站创建了一个推荐部分。这是我正在构建的一个项目，作为我的投资组合的一部分，它并不是真正为客户设计的。

尽管如此，我想要实现的目标是让这些评价中的每一个都一一出现在其父 div 中。我将它们放在自己单独的 div 中，然后使用计数器和函数来迭代它们单独出现，但是有些东西似乎不起作用(并且控制台似乎没有记录任何错误)。

下面提供了我的代码。非常感谢您的帮助。

HTML:

<div class="row text-center">

<div class="col-md-12" id="customerreviews">

<div class="customercomment text-center">

<p>"TEXT 1"</p>

<h4>Rachel Smith<span class="location"> (Manchester)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 2"</p>

<h4>Darren Wise<span class="location"> (London)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 3"</p>

<h4>Arif Akhtar<span class="location"> (Leeds)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 4"</p>

<h4>Jason Hardy<span class="location"> (London)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 5"</p>

<h4>Michelle Rousey<span class="location"> (Birmingham)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 6"</p>

<h4>Jermaine Clarke<span class="location"> (Bristol)</span></h4>

</div>


</div>

</div>

JavaScript:

var testimonials = $(".customercomment");
var testimonialsDiv = $("#customerreviews");

var currentTestimonial = 0;

function switchComments(){
if (currentTestimonial == testimonials.length-1){
currentTestimonial = 0;
}

$(testimonials[currentTestimonial]).fadeIn("fast",function(){
$(testimonials[currentTestimonial]).delay(5000).fadeOut("slow");
currentTestimonial++;
})
}

switchComments();

编辑代码在第一个带有“testimonials”类的元素中淡出，但淡出后，没有其他内容出现。

Answer 1

获取元素时使用Jquery。

var testimonials = $(".customercomment");
var testimonialsDiv = $("#customerreviews");

function switchComments(){
  var ix, ixLen;
  
  for(ix = 0, ixLen = testimonials.length; ix < ixLen; ix++){
    $(testimonials[ix]).delay(1000 * ix).fadeIn("slow");
  }
}

switchComments();

.customercomment{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center">

<div class="col-md-12" id="customerreviews">

<div class="customercomment text-center">

<p>"TEXT 1"</p>

<h4>Rachel Smith<span class="location"> (Manchester)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 2"</p>

<h4>Darren Wise<span class="location"> (London)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 3"</p>

<h4>Arif Akhtar<span class="location"> (Leeds)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 4"</p>

<h4>Jason Hardy<span class="location"> (London)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 5"</p>

<h4>Michelle Rousey<span class="location"> (Birmingham)</span></h4>

</div>

<div class="customercomment text-center">

<p>"TEXT 6"</p>

<h4>Jermaine Clarke<span class="location"> (Bristol)</span></h4>

</div>


</div>

</div>