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>
	
	<div>
    <p>Com que periocidade gostaria de ter que reabastecer a sua conta com novos créditos?</p>
		<p>Por questões de praticalidade para si, nós recomendamos 3 meses no mínimo - contudo, quantos mais créditos comprar de uma vez, mais barato lhe fica.</p>
    <div>
      <input class="js-desired_buying_periodicy" 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>
      Num mês é esperado que gaste
      <span class="js-expected_use_3_mo"></span> créditos,
			pelo que o plano a comprar para cobrir os gastos desse intervalo seria o de
      <span class="js-recommended_plan_3_mo"></span>
			créditos.
    </p>

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

    <p>

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

    </p>

    <p>
      Em 12 meses é esperado que gaste
			<span class="js-expected_use_12_mo"></span> créditos,
			pelo que o plano a comprar para cobrir os gastos desse mês seria o de
      <span class="js-recommended_plan_12_mo"></span>
			créditos.
    </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'),
	
	$desired_buying_periodicy = $('.js-desired_buying_periodicy'),

  $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 = necessary_plan || plan;
		}
	});
	
	return necessary_plan || plans[plans.length-1];
}


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

$appointments_per_month_input.on('keyup', function(e) {
  var apps_day = $appointments_per_month_input.val(),
	
			credits_3_mos = calcExpectedUse(apps_day, 3),
			credits_6_mos = calcExpectedUse(apps_day, 6),
			credits_12_mos = calcExpectedUse(apps_day, 12),
			
			necessary_plan_3_mos = getNecessaryPlan(credits_3_mos),
			necessary_plan_6_mos = getNecessaryPlan(credits_6_mos),
			necessary_plan_12_mos = getNecessaryPlan(credits_12_mos);

  $expected_use_3_months.text(credits_3_mos);
  $expected_use_6_months.text(credits_6_mos);
 ...