peakersky peakersky - 2 months ago 15
HTML Question

Javascript Quiz - problems reaching the next sibling through next() method on jQuery

I'm creating a quiz with JavaScript where I'm trying to use the jQuery to make 1 question appear at a time. I was able to get the html to show only one question on the page, by hiding the other elements, but for some reason I can't get the next sibling to show.
The jQuery API Documentation says the next() method reaches for the sibling element, but I’m not sure where the problem is.

My jQuery code is.

function main()
{
$('.slide').hide();
$('.active-slide').show();

var currentSlide = $('.active-slide')
var nextSlide = currentSlide.next();

$('.btnNext').click(function() {
currentSlide.removeClass('active-slide');
nextSlide.addClass('active-slide');
})

}
$(document).ready(main);


My HTML is.

<div class="slide active-slide">
<h3>Question 1: Answer is A! </h3>
<input type="radio" name="q1" value="correct">A</input><br>
<input type="radio" name="q1" value="incorrect">B</input><br>
<input type="radio" name="q1" value="incorrect">C</input><br>
<input type="radio" name="q1" value="incorrect">D</input>
<input type="button" class="btnNext" value="Next">
</div>
<div class="slide">
<h3>Question 2: Answer is B! </h3>
<input type="radio" name="q2" value="incorrect">A</input><br>
<input type="radio" name="q2" value="correct">B</input><br>
<input type="radio" name="q2" value="incorrect">C</input><br>
<input type="radio" name="q2" value="incorrect">D</input>
<input type="button" class="btnNext" value="Next">
</div>


The console on Chrome shows no errors which makes it harder to find.

Thanks for any help.

Answer

The first issue is the result of a jQuery selector is not live meaning if the selector properties of an element changes the cached object will not get updated. So you need to find the active slide inside the event handler.

The second issue could be related to css, since you are using hide() to hide the element, it will be using an inline display rule, but to show the element back you are only setting the active-slide class which might be having a lower order rule.

function main() {

  $('.btnNext').click(function() {
    var currentSlide = $('.active-slide').removeClass('active-slide');
    currentSlide.next().addClass('active-slide');
  })

}
$(document).ready(main);
.slide {
  display: none;
}
.slide.active-slide {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide active-slide">
  <h3>Question 1: Answer is A! </h3>
  <input type="radio" name="q1" value="correct">A
  <br>
  <input type="radio" name="q1" value="incorrect">B
  <br>
  <input type="radio" name="q1" value="incorrect">C
  <br>
  <input type="radio" name="q1" value="incorrect">D
  <input type="button" class="btnNext" value="Next">
</div>
<div class="slide">
  <h3>Question 2: Answer is B! </h3>
  <input type="radio" name="q2" value="incorrect">A
  <br>
  <input type="radio" name="q2" value="correct">B
  <br>
  <input type="radio" name="q2" value="incorrect">C
  <br>
  <input type="radio" name="q2" value="incorrect">D
  <input type="button" class="btnNext" value="Next">
</div>