jimmy118 jimmy118 - 1 year ago 115
jQuery Question

not sure why my looping function isnt working here

I have created a testimonial section for a website. This is a project I am building as part of my portfolio, it isnt really for a client.

Nonetheless, what I am trying to achieve is for each of these testimonials to appear within its parent div one by one. I have put them in their own seperate divs then used a counter and function to iterate through them appearing individually, however something does not seem to be working (and the console does not seem to be logging any errors).

My code is provided below. Many thanks for the help.

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

EDIT the code is fading in the first element with class "testimonials", but after it fades out, nothing else appears.

Answer Source

Use Jquery when you gain elements.

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download