Help with sum in JavaScript

Question

Help with sum in JavaScript

Navigation

#1 by (2 votes)

-1

I have this code: JSFiddle . Home It works as follows:

It has a tab with three menus: Option 01, Option 02, Option 03. Home And in the content of these tabs there are some < li & gt ;. In Option 01 you have a < p & gt ;: 677.81
In Option 02 you have two < p & gt ;: 569.81 and 642.71
In Option 03 has a < p & gt ;: 677.81

And in all option one of the < li > has a selected id.
I need the code to take the values that are in the < p > of all < li > that has the selected id and display the sum of these values in the input.

677.81 + 569.81 + 677.81 = 1925.43

And when you click select it changes the value ex: If it selects the second li from option 2 it removes the selected id from the first selected < li > and adds the selected id in the one he selected and changes the values. Home You have selected the first of Option 01, the second of Option 02 and the first of Option 03

677.81 + 642.71 + 677.81 = 1998.33

And so on. Home An explanation easier to understand: 3 families go to a hotel and each can only choose 1 room. for the 1st and 3rd family is available only 1 room and they choose that already for the 2nd is available 2 rooms and she chooses 1 of them. Then the code takes the price of the rooms that were chosen in the case 3 rooms and sum the prices and displays in the input. And if the 2nd family chooses another room it will take the price of the 2 rooms of the family 1 and 2 and sum with the price of the new room chosen by the family 2.

javascript jquery

asked by anonymous 22.05.2017 / 04:02

1 answer

Paste Value Boolean Column GridView White at the bottom of the screen with ScrollView

score 2 · Accepted Answer

First step: change your script to mark the selected item in some way. I advise you to apply a class on the selected item.

.conteudo li.sel a {
    color: #4682B4;
    background: #fff;
    border: 1px solid #4682B4
}

var linhas = $('.conteudo li');
$('a', linhas).click(function() {
  var self = $(this);
  var linha = self.parent();
  linha.toggleClass("sel");
  self.text(linha.hasClass("sel") ? "Remover" : "Selecionar");
});

Once selected, just add them.:

var linhas = $('.conteudo li');
var total = 0;
linhas.filter(".sel").each(function () {
  var elem = $('p', this);
  total += parseFloat(elem.text().replace(".", "").replace(",", "."));
});

The last step is to assign the value to the input.:

var intl = Intl.NumberFormat("pt-BR", { style: 'currency', currency: 'BRL' })
var dado = $('#dado');
dado.val(intl.format(total));

The complete example follows:

$(document).ready(function() {
  filtraServico($('#listaServicos li:eq(0)').attr('class'));
  
  // CODIGO COMEÇA AQUI //
  var intl = Intl.NumberFormat("pt-BR", { style: 'currency', currency: 'BRL' })
  var dado = $('#dado');
  var linhas = $('.conteudo li');
  $('a', linhas).click(function() {
    var self = $(this);
    var linha = self.parent();
    linha.toggleClass("sel");
    self.text(linha.hasClass("sel") ? "Remover" : "Selecionar");

    var total = 0;
    linhas.filter(".sel").each(function () {
      var elem = $('p', this);
      total += parseFloat(elem.text().replace(".", "").replace(",", "."));
    });
    dado.val(intl.format(total));
  });
});
function filtraServico(classe){    
  $('#listaServicos li').hide();
  $('#listaServicos li.' + classe).show();
  return false;
}

body {
  font-family: Arial;
  margin: 0;
}

a, a:hover, a:active { text-decoration: none; color: #fff; }

.opcoes {
  list-style: none;
  margin: 0; padding: 0 40px;
  background: #4682B4;
  color: #FFFFFF;
}

.opcoes li {
  display: inline-block;
  padding: 10px 15px;
}

.opcoes li.sel {
  border-bottom: 4px solid #1d324a;
}

.conteudo {
  background: #ececec;
}

.conteudo ul {
  margin: 0; padding: 0;
  list-style: none;
}

.conteudo ul li {
  padding: 10px 40px;
}

.conteudo ul li:nth-child(2n+0) {
  background: #fff;
}

.conteudo p { margin:0; padding:0; }


.conteudo li a {
    color: #fff;
    float: right;
    margin: -24px 0 0 0; padding: 5px 8px;
    background: #4682B4;
    border-radius: 3px;
    box-sizing: border-box;
    text-align: center;
    width: 100px;
}

.conteudo li.sel a {
    color: #4682B4;
    background: #fff;
    border: 1px solid #4682B4
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ulclass="opcoes">
  <a href="#" onclick="return filtraServico('op01');"><li class="sel">Opção 01</li></a>
  <a href="#" onclick="return filtraServico('op02');"><li>Opção 02</li></a>
  <a href="#" onclick="return filtraServico('op03');"><li>Opção 03</li></a>
</ul>

<div class="conteudo">
  <ul id="listaServicos">
    <li class="op01" id="selecionado">
      <p class="insert">677,81</p>
      <a href="#" >Selecionar</a>
    </li>

    <li class="op02" id="selecionado">
      <p class="insert">569,81</p>
      <a href="#" >Selecionar</a>
    </li>
    <li class="op02">
      <p class="insert">642,71</p>
      <a href="#" >Selecionar</a>
    </li>

    <li class="op03" id="selecionado">
      <p class="insert">677,81</p>
      <a href="#" >Selecionar</a>
    </li>
  </ul>
</div>

<hr />
<p>Valor total será colocado aqui:</p>
<input type="text" name="dado" id="dado" />