jQuery addClass example

Change class name on click in jQuery

by cathead

HTML

<div class="question active">
  <p>Lorem ipsum dolor sit amet.</p>
  <button name="thing1" value="foo">foo</button>
  <button name="thing1" value="bar">bar</button>
</div>
<div class="question">
  <p>Consequatur, doloribus, ipsum. Earum, fugit.</p>
  <button name="thing2" value="foo">foo</button>
  <button name="thing2" value="bar">bar</button>
</div>
<div class="question">
  <p>Placeat, fuga distinctio deleniti necessitatibus.</p>
  <button name="thing3" value="foo">foo</button>
  <button name="thing3" value="bar">bar</button>
</div>
<div class="question">
  <p>Dolores nemo explicabo, hic repellat.</p>
  <button name="thing4" value="foo">foo</button>
  <button name="thing4" value="bar">bar</button>
</div>

SCSS

.question {
  display: none;
}

.question.active {
  display: block;
}

JavaScript

$(function() {
	var questions = {};
  
  var $allQuestions = $('.question');
  
  $('.question button').click(function() {
  	questions[ $(this).attr('name') ] = $(this).val();
    // Instead of this.val, grab value of selected radio
    
    $allQuestions.filter('.active')
    	.removeClass('active')
      .next()
      .addClass('active');
    
    console.table(questions);
    
    if ($(this).attr('name') == 'thing4') {
    	// all four answered
      
      if (questions.thing1 == 'foo' && questions.thing2 == 'bar') {
      	alert('you did it');
      } else {
      	alert('you goofed');
      }
    }
  });
})