jQuery addClass example

Change class name on click in jQuery

by joplomacedo

HTML

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



<div class="js-credits_help_block credits_help_block is-inactive">


<div class="js-questions_block questions_block">
  <div class="js-appointments_per_day_block credits_help_qa_block">
    <p class="credits_help_question">Quantas marcações tem em média por dia?</p>
    <div>
      <input class="js-appointments_per_day_input" type="text">
    </div>
  </div>
	
	  <div class="js-credits_per_sms_block credits_per_sms_block is-inactive credits_help_qa_block">
    <p class="credits_help_question">Quantos créditos utiliza a sua mensagem?</p>
		<p class="credits_help_question_details">Se não sabe a resposta a esta questão, clique aqui.</p>
    <div>
      <input class="js-credits_per_sms_input" type="text">
    </div>
  </div>


  <div class="js-desired_buying_periodicy_block desired_buying_periodicy_block is-inactive credits_help_qa_block">
    <p class="credits_help_question">Com que periocidade gostaria de ter que reabastecer a sua conta com novos créditos?</p>
    <p class="credits_help_question_details">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_input" type="text">
    </div>
  </div>

</div>




<div class="js-answer_block answer_block is-inactive">

  <div class="js-exists_fitting_plan_block is-inactive">
		<p>
		Para que tenha apenas que reabestecer a sua conta com créditos daqui a <span class="js-desired_buying_periodicy_result"></span> mes(es), deve comprar o plano de <span class="js-necessary_plan_result"></span> créditos.
		</p>
  </div>

  <div class="js-doesnt_exist_fitting_plan_block is-inactive">
    <p>
		Assumindo um custo por SMS de 1 crédito, pra que tivesse que reabestecer a sua conta com créditos, apenas de <span...

CSS

html {
	font-family: helveticaneue;
}

.credits_help_block.is-inactive,
.credits_per_sms_block.is-inactive,
.desired_buying_periodicy_block.is-inactive,
.answer_block.is-inactive,
.js-exists_fitting_plan_block.is-inactive,
.js-doesnt_exist_fitting_plan_block.is-inactive {
  display: none;
}


.questions_block,
.answer_block {
	padding: 2em;
	border: 1px solid;
	margin-bottom: 1em;
}

.credits_help_qa_block {
	margin-bottom: 2em;
}

.credits_help_question {
    font-size: 1.1em;
		margin-bottom: .5em;
}

.credits_help_question_details {
	opacity: .5;
}

input {
	padding: 1em;
	border-radius: 2px;
	border: 1px solid #444;
	width: 5em;
}

JavaScript

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

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

    $appointments_per_day_block = $('.js-appointments_per_day_block'),
    $appointments_per_day_input = $('.js-appointments_per_day_input'),
  	
  	$credits_per_sms_block = $('.js-credits_per_sms_block'),
  	$credits_per_sms_input = $('.js-credits_per_sms_input'),

    $desired_buying_periodicy_block = $('.js-desired_buying_periodicy_block'),
    $desired_buying_periodicy_input = $('.js-desired_buying_periodicy_input'),

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

    $desired_buying_periodicy_result = $('.js-desired_buying_periodicy_result'),
    $necessary_plan_result = $('.js-necessary_plan_result'),
    $expected_credits_result = $('.js-expected_credits_result'),

    $exists_fitting_plan_block = $('.js-exists_fitting_plan_block'),
    $doesnt_exist_fitting_plan_block = $('.js-doesnt_exist_fitting_plan_block');


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



function calcExpectedCreditUsage( avg_apps_day, sms_credit_cost, total_months ) {

console.log('===============');
	console.log('Appointments day = ' + avg_apps_day);
	console.log('SMS credit cost = ' + sms_credit_cost);
	console.log('Total months = ' + total_months);
	console.log('Result = ' + avg_apps_day * 22 * total_months * sms_credit_cost);
	console.log('===============');


  return avg_apps_day * 22 * total_months * sms_credit_cost;
}


function getNecessaryPlanForCredits(credits) {
  var necessary_plan;

  plans.forEach(function(plan) {
    if (plan.credits >= credits)  {
      necessary_plan = necessary_plan || plan;
    }
  });

  return necessary_plan;
}


function updateResults (desired_buying_periodicy, expected_credit_usage, necessary_plan) {
  $exists_fitting_plan_block.addClass('is-inactive');
 ...