Sumowanie zamówienia - jQuery

Question

Problem polega na tym, że nie sumuje drugiego zamówienia do odpowiedniego diva. 

http://jsfiddle.net/Dunkej/w9atqjm6/8/

Answer 1

Identyfikator ID musi być unikalny i nie może się powtarzać w kodzie.

<div id='sum'>Sumowanie zamowienia 1</div>
<div id='sum'>Sumowanie zamowienia 2</div>

 

Comments

@ pablop76 chodzilo o to abys zastosowal klase.

---

  $('select :selected').each(function() {
    sum += Number($(this).val());
  });

Ta pętla jest niepotrzebna. Ona zlicza wszystkie option, czyli na starcie masz już 60. 

var sum = 0;

jest w zasięgu lokalnym przez co ciągle się zeruje po wybraniu option.

$("#sum").html(sum);

Masz dwa takie same id co wspomniałem wcześniej jest niedopuszczalne. To moze być uzależnione od np. name , które można ustawić takie same dla grupy pierwszej i takie same ale inne niż pierwsze dla grupy drugiej. I aktualizować wynik w id = name

---

A nie idzie jakos zastosować diva wrzucic te 3 selecty i jakos wedlug this to liczyc ?

---

np. this, parent itp ?

---

Można.

---

ale jak ?

---

Wykorzystałem jednak pętlę ponieważ delegacja zdarzeń nie daje możliwości prostego odejmowania jeżeli user zmieni wartość wcześniej ustawioną. Suma jednak w tym przypadku powinna być w zasięgu lokalnym, ponieważ zerowanie jej jest wskazane przed każdym nowym ustawieniem wartości, dlatego, ze pętla zlicza za każdym razem od nowa wartości w option danego selecta. Jak widać jedyną zmianą jest ustawienie takiego samego name dla select z tej samej grupy dzięki czemu program wie jaką grupę klikamy aktualnie i wstawia wynik w miejsce z takim samym id jak name selecta.

Produkt 1
  <select name='anch1'>
 <option value=''>--wybierz--</option>
 <option value='10'>10 ++</option>
 <option value='20'>20 ++</option>
 <option value='30'>30 ++</option>
 <option value='40'>40 ++</option>
 <option value='50'>50 ++</option>
</select>
</br>

Produkt 2
<select name='anch1'>
 <option value=''>--wybierz--</option>
 <option value='10'>10 ++</option>
 <option value='20'>20 ++</option>
 <option value='30'>30 ++</option>
 <option value='40'>40 ++</option>
 <option value='50'>50 ++</option>
</select>
</br>

Produkt 3
<select name='anch1'>
 <option value=''>--wybierz--</option>
 <option value='10'>10 ++</option>
 <option value='20'>20 ++</option>
 <option value='30'>30 ++</option>
 <option value='40'>40 ++</option>
 <option value='50'>50 ++</option>
</select>

<div id='anch1'>Sumowanie zamowienia 1</div>


</br></br></br><!-- DRUGIE ZAMÓWIENIE -->
Produkt 1
<select name='anch2'>
 <option value=''>--wybierz--</option>
 <option value='10'>10 ++</option>
 <option value='20'>20 ++</option>
 <option value='30'>30 ++</option>
 <option value='40'>40 ++</option>
 <option value='50'>50 ++</option>
</select>
</br>

Produkt 2
<select name='anch2'>
 <option value=''>--wybierz--</option>
 <option value='10'>10 ++</option>
 <option value='20'>20 ++</option>
 <option value='30'>30 ++</option>
 <option value='40'>40 ++</option>
 <option value='50'>50 ++</option>
</select>
</br>

Produkt 3
<select name='anch2'>
 <option value=''>--wybierz--</option>
 <option value='10'>10 ++</option>
 <option value='20'>20 ++</option>
 <option value='30'>30 ++</option>
 <option value='40'>40 ++</option>
 <option value='50'>50 ++</option>
</select>

<div id='anch2'>Sumowanie zamowienia 2</div>

$('select').change(function(e) {
var sum = 0;
var $id = e.target.name;
  $('select[name="' + $id + '"]').each(function() {
    sum += Number($(this).val());
  });
  $("#"+$id).html("Suma zamówienia: " + sum);
});