Суммируйте все data-price из входных данных с атрибутом, доступным в jquery

Question

Я борюсь с моим кодом в течение пары часов, но безуспешно.Я хочу суммировать все значения из data-price, но я постоянно получаю NaN.Мой код "выглядит" правильно создан, не понимаю, почему он не работает.Любая помощь будет заметна.

$("#sub").click(function() {
  var sum = 0;
  $('#form input').each(function() {
    sum += $(this).data('price');
  });
  alert(sum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <input type="hidden" name="make" value="0">
  <input type="hidden" name="got" value="" data-price='10'>
  <input type="hidden" name="get" value="" data-price='20'>
  <button id="sub">submit</button>
</form>

Answer 1

Проблема в том, что первый вход не имеет атрибута data-price, поэтому возвращается undefined и вызывает ошибку в расчете.

Чтобы исправить это, вы можете установить нулевое / пропущенное значение на 0, прежде чем добавить его к sum:

$("#sub").click(function() {
  var sum = 0;
  $('#form input').each(function() {
    sum += $(this).data('price') || 0; // note the change on this line
  });
  console.log(sum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form">
  <input type="hidden" name="make" value="0">
  <input type="hidden" name="got" value="" data-price='10'>
  <input type="hidden" name="get" value="" data-price='20'>
  <button id="sub">submit</button>
</form>

В качестве альтернативы вы можете поместить класс только в нужные элементы input, значения которых вы хотите суммировать, и вместо этого выбрать их.