Логика калькулятора

242

27 февраля 2017, 13:29

Есть небольшая табличка товаров с ценами и селектом (выбор кол-во товаров).

Хотелось бы чтобы js-ом при загрузке страницы, в поле общая сумма выводить эту самую общую сумму и в дальнейшем пересчитывать в зависимости от кол-во выбранного товара.

Код:

var total = 0; 
 
//При загрузке стр. отобразить общую сумму присутствующих товаров 
$('.price').each(function(){ 
  var val = parseInt($(this).html()); 
 
  total += val; 
   
  resPr(); 
}); 
 
// Изменение количества товара 
$( ".select" ).selectmenu({ 
  change: function( event, data ) { 
    var          
        tr = $(this).closest('tr'), 
        curPrice = tr.find('.price'), 
        curPriceVal = parseInt(curPrice.data('price')), 
        table = tr.closest('table'); 
 
 
    var val = curPriceVal*data.item.value; 
    curPrice.html((val)); 
 
    total += val;     // Отсет от total после загрузки стр. А нужен пересчет. ?* 
 
    resPr(); 
 
  } 
}); 
 
// Удалить ячейку 
$('.delete').on('click', function(e){ 
  e.preventDefault(); 
 
  var item = $(this).closest('tr'), 
      valPr = item.find('.price'), 
      val = parseInt(valPr.html()); 
 
 
 
  total -= val; 
  item.remove(); 
 
  resPr(); 
}); 
 
 
// Запись результата 
function resPr(){ 
  var resPrice = $('.res'); 
 
  resPrice.each(function(){ 
    var res = $(this); 
 
    res.html(total); 
  }); 
}

table { 
  width: 100%; 
} 
 
table td { 
  padding: .5rem;; 
  border: 1px solid #ccc; 
} 
 
.res { 
  color: red; 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
   
  <table> 
    <tr> 
      <td> 
        <div class="price" data-price="1200">1200</div> 
      </td> 
      <td> 
        <a href="#" class="delete">delete</a> 
      </td> 
      <td> 
        <select name="count" class="select"> 
          <option selected="selected">1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
        </select> 
      </td> 
    </tr> 
    <tr> 
      <td> 
        <div class="price" data-price="800">800</div> 
      </td> 
      <td> 
        <a href="#" class="delete">delete</a> 
      </td> 
      <td> 
        <select name="count" class="select"> 
          <option selected="selected">1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
        </select> 
      </td> 
    </tr> 
    <tr> 
      <td colspan="3"> 
        res: <span class="res">0</span> 
      </td> 
    </tr> 
  </table>

Но не получается настроить этот пересчет суммы.

Вопрос: как правильно настроить пересчет общей стоимости товара при выборе кол-ва в select?

Answer 1

Следует вычислять сумму ДО изменения и затем отнимать эту сумму и прибавлять новую. Для этого используем метод open.

var total = 0; 
var el_last_sum = 0; //сумма ДО изменения количества 
 
//При загрузке стр. отобразить общую сумму присутствующих товаров 
$('.price').each(function() { 
  var val = parseInt($(this).html()); 
  total += val; 
 
  resPr(); 
}); 
 
// Изменение количества товара 
$(".select").selectmenu({ 
  open: function(event, ui) { 
    var 
      tr = $(this).closest('tr'), 
      curPrice = tr.find('.price'), 
      curPriceVal = parseInt(curPrice.data('price')); 
 
    el_last_sum = curPriceVal * $(this).val(); //получаем сумму по текущей строке 
 
  }, 
  change: function(event, data) { 
    var 
      tr = $(this).closest('tr'), 
      curPrice = tr.find('.price'), 
      curPriceVal = parseInt(curPrice.data('price')), 
      table = tr.closest('table'); 
 
    var val = curPriceVal * data.item.value; 
    curPrice.html((val)); 
 
    total = total - el_last_sum + val; // Отсет от total после загрузки стр. А нужен пересчет. ?* 
 
    resPr(); 
 
  } 
}); 
 
// Удалить ячейку 
$('.delete').on('click', function(e) { 
  e.preventDefault(); 
 
  var item = $(this).closest('tr'), 
    valPr = item.find('.price'), 
    val = parseInt(valPr.html()); 
 
  total -= val; 
  item.remove(); 
 
  resPr(); 
}); 
 
 
// Запись результата 
function resPr() { 
  var resPrice = $('.res'); 
 
  resPrice.each(function() { 
    var res = $(this); 
 
    res.html(total); 
  }); 
}

table { 
  width: 100%; 
} 
 
table td { 
  padding: .5rem; 
  ; 
  border: 1px solid #ccc; 
} 
 
.res { 
  color: red; 
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<table> 
  <tr> 
    <td> 
      <div class="price" data-price="1200">1200</div> 
    </td> 
    <td> 
      <a href="#" class="delete">delete</a> 
    </td> 
    <td> 
      <select name="count" class="select"> 
          <option selected="selected">1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
        </select> 
    </td> 
  </tr> 
  <tr> 
    <td> 
      <div class="price" data-price="800">800</div> 
    </td> 
    <td> 
      <a href="#" class="delete">delete</a> 
    </td> 
    <td> 
      <select name="count" class="select"> 
          <option selected="selected">1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
        </select> 
    </td> 
  </tr> 
  <tr> 
    <td colspan="3"> 
      res: <span class="res">0</span> 
    </td> 
  </tr> 
</table>

Answer 2

Есть два пути: Первый: При выборе в select бежишь по всем "price" и "count" и считаешь общую сумму с помощью:

var Summ = 0;    
$("table tr").each(function(){
            Summ += Number($(this).find('.price').text()) * Number($(this).find('select[name="count"]').val())
        })

И второй: Отслеживаешь какой был выбран, уменьшаешь на это число сумму и прибавляешь новое, но тогда надо отказаться от select в сторону input и событие keypress.