3

Estou com um problema de implementação dessa simulação, é o seguinte, o usuário escolhe o pacote clicando em uma dessas caixas (mensal, trimestral, semestral ou anual) depois escolhe no select a quantidade de pontos e queria que houvesse a multiplicação desses dados mostrando na ultima caixa onde tem o 306 via JavaScript ou utilizando a biblioteca JQuery.

codigo e como está no layout

<!-- TIPO DE PLANO -->
<a href="" class="ico_planos">
    <div class="col-md-3">
        <header>
          <p>Mensal</p>
        </header>                       
        <section class="valor">
          <p><span>R$</span>170<span>,00</span></p>
        </section>
    </div>
</a>
<!-- QUANTIDADE QUE ESCOLHER -->
<select name="qntdPlayers" id="selectQntdPlayers">
    <option value="1">01 Ponto</option>
    <option value="3">03 Pontos</option>
    <option value="6">06 Pontos</option>
    <option value="9">09 Pontos</option>
    <option value="10">10 ou mais Pontos</option>
</select>

<!-- DENTRO DA DIV simulacaoValorTotal eu gostaria de mostrar o resultado da multiplicação de valor x value escolhido -->
<section class="praquem">
    <p><b style="color:#064e71">Valor do pacote</b></p>
    <p class="simulacaoValorTotal">R$ 306,00/mês</p> <!-- <- MOSTRAR AQUI O RESULTADO DE TIPO DE PACOTE X QUANTIDADE ESCOLHIDA (170X1 = 170) --> 
</section>
5
  • você pode pegar o valor usando $("#caixa_1").html(), isso pega o conteúdo dentro da caixa. 2/04/2016 às 21:59
  • @Tyago a pergunta melhorou bastante com a edição, seja bem-vindo ao site e grato pela atenção em melhorar a postagem. Com o código no corpo da postagem, fica mais fácil de a comunidade copiar e colar em testes.
    – Largato
    2/04/2016 às 22:00
  • o tempo de adesão são links? Pois, haveria de saber primeiro qual o plano selecionado e depois fazer a marcação do valor. Mas nao entendi muito bem seu print e codigo postado com é a seleção dos pacotes. Pois se os pacotes forem utilizados em uma espécie de input radio voce usaria $("#myform input[type='radio']:checked").val(); para saber qual pacote foi selecionado e usaria $( "#myselect option:selected" ).val(); para saber o valor de pontos, considerando que todos os valores devem estar no value de cada elemento em questão. 2/04/2016 às 22:21
  • Olá @Gabriel Garcia, o tempo de adesão são sim os links! coloquei so um ali que é referente ao mensal, os outros (trimestral, semestral e anual) tmbm são o mesmo codigo a unica coisa que muda é o valor em R$ do pacote. os passos que o usuario teria que ffazer é o seguinte: 1 - Clicar no pacote (que está dentro de um link); 2 - Clicar no select e escolher a option (esses tem o value referentes); 3 - Calcular multiplicando o valor em R$ de cada pacote X o value que estão dentro dos options do select 4 - Mostrar o resultado dessa multiplicação la no ultimo quadro 2/04/2016 às 23:21
  • Manda o codigo dele completo ai para eu ver como funciona, com todos os links e lhe dou um retorno. 3/04/2016 às 0:06

3 Respostas 3

2

https://jsfiddle.net/v21p62t7/1/

basicamente, tens que fazer um evento onchange no teu select e um onclick nas sections com a class valor; No entanto, convém adicionares mais um data-attribute chamado data-plan-price com o valor (em inteiro) do plano.

Quando clicada, ela faz assign a uma variavel "global" chamada keep. Quando o onchange do select dispara, ele simplesmente vai buscar esse valor que está na keep e multiplica pelo seu proprio value, formata o numero, e troca o innerText do elemento .simulacaoValorTotal


var keep = {};

var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'BRL',
  minimumFractionDigits: 2,
});

document.querySelector('#selectQntdPlayers').onchange = function (event) { 
    var totalPrice;
  var selectedModifier = parseInt(event.target.value,10);
  if (!keep.selectedPlan) return false;
  totalPrice = formatter.format(keep.selectedPlan * selectedModifier);
  document.querySelector('.simulacaoValorTotal').innerText = totalPrice + "/mês";
  console.log("R$ " + totalPrice + "/mês");
}

document.querySelector('.valor').onclick = function (event) {
    keep.selectedPlan = parseInt(this.getAttribute("data-plan-price"),10);
}
1
  • Boa solução. Só trocaria o en-US por pt-BR pra ficar no formato brasileiro.
    – Sam
    22/09/2017 às 22:19
1

Existem várias formas de fazer o que você quer, deixarei aqui a forma que acho mais simples.

Bom, em primeiro lugar, a pessoa deverá ter um tipo de modalidade escolhida, então vamos deixar o primeiro item com a classe selected, e de acordo com a alteração de modalidade, iremos alterar o item selecionado. Creio que em seu CSS já possua algo do tipo, para melhor utilização do site.

Então, pegaremos o valor do item selecionado e multiplicaremos pelo valor selecionado no select. Como o resultado final deverá alterar ao mudar o item selecionado, tanto na modalidade, quanto no select, criarei uma função para fazer isso.

Ficaria desta forma:

$('section.valor').click(function(){
		$('section.valor').removeClass( "selected" ); //Remove classe selected de todos
		$(this).addClass('selected'); //add classe selected ao item selecionado
		calculaValor(); //chama função para alterar o resultado
});

 $('#selectQntdPlayers').change(function(){
 		calculaValor(); //chama função para alterar o resultado
 })

function calculaValor(){
	var plano = $('section.selected').find('span').first().html(); //obtem o valor da modalidade selecionado
	var pontos = $('#selectQntdPlayers option:selected').val(); //obtem o valor do select
	var result = parseInt(plano) * parseInt(pontos); //multiplica os dois (convertendo para int antes)
	$('#simulacaoValorTotal').html('R$ ' + result + ',00/mês'); //exibe o resultado
}
section.selected{
  color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-3">
<a href="javascript:void(0);" class="ico_planos">
    <div class="col-md-3 col-sm-3">
        <header>
          <p>Mensal</p>
        </header>                       
        <section class="valor selected">
            <p>R$ <span>170,00</span></p>
        </section>
    </div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:void(0);" class="ico_planos">
    <div class="col-md-3 col-sm-3">
        <header>
          <p>Trimestral</p>
        </header>                       
        <section class="valor">
          <p>R$ <span>150,00</span></p>
        </section>
    </div>
</a>
</div>
<div class="col-md-3">
<a href="javascript:void(0);" class="ico_planos">
    <div class="col-md-3 col-sm-3">
        <header>
          <p>Semestral</p>
        </header>                       
        <section class="valor">
          <p>R$ <span>130,00</span></p>
        </section>
    </div>
</a>
</div>
</div>

<!-- QUANTIDADE QUE ESCOLHER -->
<select name="qntdPlayers" id="selectQntdPlayers">
    <option value="1">01 Ponto</option>
    <option value="3">03 Pontos</option>
    <option value="6">06 Pontos</option>
    <option value="9">09 Pontos</option>
    <option value="10">10 ou mais Pontos</option>
</select>

<!-- DENTRO DA DIV simulacaoValorTotal eu gostaria de mostrar o resultado da multiplicação de valor x value escolhido -->
<section class="praquem">
    <p><b style="color:#064e71">Valor do pacote</b></p>
    <p class="simulacaoValorTotal" id="simulacaoValorTotal">R$ 306,00/mês</p> <!-- <- MOSTRAR AQUI O RESULTADO DE TIPO DE PACOTE X QUANTIDADE ESCOLHIDA (170X1 = 170) --> 
</section>

Exemplo no JSFiddle.

1
  • O código está comentado, mas qualquer dúvida eu tento explicar melhor.
    – Randrade
    4/04/2016 às 12:56
0

Uma opção simples e funcional.

HTML

    <script
    src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
    crossorigin="anonymous"></script>

    <!-- TIPO DE PLANO -->
    <a href="#" class="ico_planos selected" data-val="170">
    <div class="col-md-3">
        <header>
          <p>Mensal</p>
        </header>                       
        <section class="valor">
          <p><span>R$</span>170<span>,00</span></p>
        </section>
    </div>
    </a>
    <a href="#" class="ico_planos selected" data-val="350">
    <div class="col-md-3">
        <header>
          <p>Bimestral</p>
        </header>                       
        <section class="valor">
          <p><span>R$</span>350<span>,00</span></p>
        </section>
    </div>
    </a>
    <!-- QUANTIDADE QUE ESCOLHER -->
    <select name="qntdPlayers" id="selectQntdPlayers">
    <option value="1">01 Ponto</option>
    <option value="3">03 Pontos</option>
    <option value="6">06 Pontos</option>
    <option value="9">09 Pontos</option>
    <option value="10">10 ou mais Pontos</option>
    </select>

    <!-- DENTRO DA DIV simulacaoValorTotal eu gostaria de mostrar o resultado da multiplicação de valor x value escolhido -->
    <section class="praquem">
    <p><b style="color:#064e71">Valor do pacote</b></p>
    <p class="simulacaoValorTotal">R$ 306,00/mês</p> <!-- <- MOSTRAR AQUI O RESULTADO DE TIPO DE PACOTE X QUANTIDADE ESCOLHIDA (170X1 = 170) --> 
    </section>

JavaScript

    function calc(){
        var plano = parseInt($('.selected').data('val'), 10);
      var ponto = parseInt($('#selectQntdPlayers').val(), 10);
      console.log(plano);
      $('p.simulacaoValorTotal').html('R$ '+plano*ponto+',00');
    }

    $(document).ready(function(){
        $('.ico_planos').click(function(){
        $('.ico_planos.selected').removeClass('selected');
        $(this).addClass('selected');
        calc();
      })
      $('#selectQntdPlayers').change(function(){
        calc();
      })
    })

Exemplo: https://jsfiddle.net/tfh4ed4s/1/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .