将输入值添加到数据库值

Question

我正在开发一个项目，我必须在输入值中添加数据库值。

<div>
    <div class="price">680</div>
    <div class="price">
        <input type="number" name="name">
    </div>
</div>

在上面的代码中，680将来自数据库。在这里，我想为680添加一个输入数字。我是jQuery的新手。

我的JavaScript代码是

    $(document).ready(function() {
        var total = 0;
        $("input").keyup(function(){
            var priceList = $('.price');
            $.each(priceList, function(i, price){
                total += parseFloat($(price).text());
            });
            alert(total);
        });
    });

</script>

在此输出“NaN”。

Answer 1

在此输出“NaN”。

你收到这条消息，因为你试图循环通过div并解析它们的文本，当它是空的时候。你需要在input上循环。

您可以使用数据库值初始化total，然后遍历input并在每次迭代中将解析后的值添加到total。

注意：当您跟踪用户输入时，请使用input事件，因为它更有效。

多输入：

$(document).ready(function() {
  var db_val = parseFloat($('.price:first').text());
  var total = 0;

  $(".price input").on('input', function() {
    var total = db_val;

    $('.price input').each(function() {
      total += parseFloat($(this).val()) || 0;
    });

    $(".total").text(total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="price">680</div>
  <div class="price">
    <input type="number" name="name">
  </div>
  <div class="price">
    <input type="number" name="name">
  </div>
  <div class="price">
    <input type="number" name="name">
  </div>
  <div class="total">680</div>
</div>

单输入：

$(document).ready(function() {
  var db_val = parseFloat($('.price:first').text());
  var total = 0;

  $(".price input").on('input', function() {
    var total = db_val;

    total += parseFloat($(this).val()) || 0;

    $(".total").text(total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="price">680</div>
  <div class="price">
    <input type="number" name="name">
  </div>
  <div class="total">680</div>
</div>

Answer 2

干得好

var result = 0;
var price = +$('#price').text();

$('input[type="number"]').on('input', function() {
  var val = +$(this).val();
  result = parseInt(val + price);
  $('#price').text(result)
  console.log(result);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="price" id="price">680</div>
  <div class="price">
    <input type="number" name="name">
  </div>