不知道为什么我的循环函数不能在这里工作

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（）;

编辑代码在第一个元素中消失了＃34;推荐和＃34;但在淡出后，没有其他内容出现。

Answer 1

获取元素时使用Jquery。

＆＃13;

＆＃13;

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

＆＃13;

.customercomment{
  display: none;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;