jQuery addClass example

Change class name on click in jQuery

by joplomacedo

HTML

<p>
  <span class="js-open_credits_help_block_btn">Quer saber qual o número ideal de créditos a comprar?</span></p>


<div class="js-credits_help_block credits_help_block is-inactive">
  <div>
    <p>Quantas marcações tem em média por dia?</p>
    <div>
      <input class="js-appointments_per_month_input" type="text">
    </div>
  </div>

  <div class="js-answer_block answer_block is-inactive">
    <p>
      Nós recomendamos que compre créditos suficientes para pelo menos 3 meses. Comprar para menos obriga-o a uma frequência de compra pouco prática.
    </p>

    <p>
      Em 3 meses é esperado que gaste
      <span class="js-expected_use_3_mo"></span>,
			pelo que o plano a comprar para cobrir os gastos desse intervalo seria o de
      <span class="js-recommended_plan_3_mo"></span>.
    </p>

    <p>

      Em 6 meses é esperado que gaste
      <span class="js-expected_use_6_mo"></span>,
			pelo que o plano a comprar para cobrir os gastos desse intervalo seria o de
      <span class="js-recommended_plan_6_mo"></span>.

    </p>

    <p>
      Em 12 meses é esperado que gaste
			<span class="js-expected_use_12_mo"></span>,
			pelo que o plano a comprar para cobrir os gastos desse mês seria o de
      <span class="js-recommended_plan_12_mo"></span>.
    </p>

  </div>
</div>

CSS

.credits_help_block.is-inactive,
.answer_block.is-inactive {
  display: none;
}

JavaScript

var $open_credits_help_block_btn = $('.js-open_credits_help_block_btn'),

  $credits_help_block = $('.js-credits_help_block'),

  $appointments_per_month_input = $('.js-appointments_per_month_input'),

  $answer_block = $('.js-answer_block'),


  $expected_use_3_months = $('.js-expected_use_3_mo'),
  $expected_use_6_months = $('.js-expected_use_6_mo'),
  $expected_use_12_months = $('.js-expected_use_12_mo'),

  $recommended_plan_3_months = $('.js-recommended_plan_3_mo'),
  $recommended_plan_6_months = $('.js-recommended_plan_6_mo'),
  $recommended_plan_12_months = $('.js-recommended_plan_12_mo');

var plans = [
  {
		credits: 1000
	},
	{
		credits: 3000
	},
	{
		credits: 6000
	},
	{
		credits: 12000
	}
];

function calcExpectedUse(avg_apps_day, total_months) {
  return avg_apps_day * 21 * total_months;
}

function getNecessaryPlan( credits ) {
	var necessary_plan;

	plans.forEach(function ( plan ) {
		if ( plan.credits >= credits ) {
			necessary_plan = plan;
		}
	});
	
	return necessary_plan || plans[plans.length-1];
}


$open_credits_help_block_btn.on('click', function() {
  $credits_help_block.removeClass('is-inactive');
})

$appointments_per_month_input.on('keyup', function(e) {
  var apps_day = $appointments_per_month_input.val(),
	
			apps_3_mos = calcExpectedUse(apps_day, 3),
			apps_6_mos = calcExpectedUse(apps_day, 6),
			apps_12_mos = calcExpectedUse(apps_day, 12),
			
			recommended_plan_3_mos
			recommended_plan_6_mos
			recommended_plan_12_mos

  $expected_use_3_months.text(apps_3_mos);
  $expected_use_6_months.text(apps_6_mos);
  $expected_use_12_months.text(apps_12_mos);

  $answer_block.removeClass('is-inactive');
})