Question

我有一个表格，允许用户添加事件的参与者数量。在其中，我使用输入类型数字字段来获取参与者的数量。然后我计算出每种类型的乘客要支付多少费用。我有3种乘客类型。

我的桌子看起来像这样，

我使用keyup mouseup绑定来获取用户的输入值，并将其乘以一个参与者的费用。

var totalAdults;

jQuery("#number_adults").bind('keyup mouseup', function () {
var numOfAdults = jQuery("#number_adults").val();

totalAdults = numOfAdults * adultFee;

});

我有3个上述功能可以计算并实时显示每种类型的乘客需要支付多少费用。

现在，我需要获取这三种乘客类型费用的总和，并在表格末尾向用户实时显示/更新。

我尝试使每种乘客类型的总价值global并计算出总和，但出现错误，提示缺少与此MDN article关联的分号错误

我被困在这里。 如何获得三种乘客类型各自功能以外的总价值，并实时正确显示该价值？（当他们更新乘客数量时，乘客类型的总数正在改变，我需要相应地更改最终总数）。请帮助

更新：

这是我使用的html表。对于其他两种乘客类型，此操作又重复了两次。

var adultFee = 150;
var finalTotal = 0;

jQuery("#number_adults").bind('keyup mouseup', function() {
  var numOfAdults = jQuery("#number_adults").val();
  totalAdults = numOfAdults * adultFee;
  jQuery("#adult_amount").html(totalAdults);

  // console.log(totalAdults);
  finalTotal = finalTotal + totalAdults;
  console.log(finalTotal);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
  <td style="font-weight: 600;">Adult</td>
  <td id="adult_price" name="adult_price">150.00</td>
  <td>
    <input id="number_adults" max="3" min="1" name="number_adults" type="number" value="0" class="form-control">
  </td>
  <td name="amount">
    <p id="adult_amount"></p>
  </td>
</tr>

这是我尝试获取最终总数的方式，它不显示任何结果

jQuery(document).on('change', '#adult_amount', function() {
finalTotal = finalTotal+totalAdults;

alert(finalTotal);
});

Answer 1

您只需在表格的每一行上循环，即可计算总和以及个人。在这里，我通过动态方法来完成。如果将每个乘客的总数插入唯一的输入中，则可以从该输入中访问。否则请按照方法

$(document).on('keyup mouseup','.qty', function() {
     calculate();
});

function calculate(){
  var finalTotal = 0;
  var old = 0;
  var mature = 0;
  var adult = 0;
  $('.qty').each(function(key,value){
    $qty = $(this).val();
    $type = $(this).attr('data-type');
    $amount = $(this).parent().siblings('.adult_price').html();
    $total = Number($qty) * parseFloat($amount);
    $(this).parent().siblings('.amount').html($total);
    finalTotal += $total;
   
   if($type == 'adult')
      adult += parseFloat($total);
   else if($type == 'mature')
      mature += parseFloat($total);
   else if($type == 'old')
      old += parseFloat($total);

  });
  
  $('.grandTotal').html(finalTotal);
   
   // console.log('Adult',adult);
   // console.log('Mature',mature);
   // console.log('Old',old);
}

table {
  border-collapse: collapse;
  width: 80%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #4CAF50;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Passenger Types</th>
      <th>Amount</th>
      <th>Qty</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><b>Adult</b></td>
     <td class="adult_price" name="adult_price">150.00</td>
     <td>
        <input max="3" min="1" name="number_adults" type="number" value="0" class="form-control qty" data-type="adult">
      </td>
      <td name="amount" class='amount'></td>
    </tr>
    <tr>
      <td><b>Mature</b></td>
     <td class="adult_price" name="adult_price">200.50</td>
     <td>
        <input max="3" min="1" name="number_adults" type="number" value="0" class="form-control qty" data-type="mature">
      </td>
      <td name="amount" class='amount'></td>
    </tr>
    <tr>
      <td><b>Old</b></td>
     <td class="adult_price" name="adult_price">150.00</td>
     <td>
        <input max="3" min="1" name="number_adults" type="number" value="0" class="form-control qty" data-type="old">
      </td>
      <td name="amount" class='amount'></td>
    </tr>
    <tr>
      <td colspan="3"><b>Grand Total</b></td>
      <td class='grandTotal'>100</td>
    </tr>
  </tbody>
</table>

Answer 2

jQuery是非常灵活的使用类，而不是id。如果您使用输入，选择等，则应将input或change事件委托给它们。

$('input').on('input', function() {...

只要用户在输入标签上输入或选择，就会触发

input事件。当用户在输入和上输入或选择，然后在其他位置单击（change或unfocus事件）时，blur事件将触发。

为保持一致性，对HTML进行了少许修改。请注意，每个<tr>有2个额外的输入。

在表中使用输入时，您可以遍历DOM，方法是先将插补/更改/单击的标记引用为$(this)，然后将 climb 引用到父项<td>，然后从那里开始使用<td>转到下一个.next()或使用<td>转到上一个.prev()。到达附近的<td>后，请使用.find()在其中输入内容。从输入中提取数字时，通常为字符串，但使用jQuery方法.val()时，它应自动将输入值提取为数字。演示中有详细评论。

/*
//A - Any tag with the class of .qty that the user inputs data into triggers a function
//B - Get the value of the imputed .qty (ie $(this)) 
//C - reference $(this) parent <td> go to the next <td> then find a tag with the class .price and get its value
//D - reference $(this) parent <td> go to the previous <td> then find a tag with the class of .total then set its value to the product of qty and price and fix it with hundredths (.00 suffix)
//E - Declare an empty array
//F - Get the value of each .total, convert it into a number then push the number into the empty array
//G - Use .reduce() to get the sum of all values within the array then fix it with hundredths (.00 suffix) and set it as the value of .grand
*/
$('.qty').on('input', function() { //A
  var qty = $(this).val(); //B
  var price = $(this).parent().prev('td').find('.price').val(); //C
  $(this).parent().next('td').find('.total').val((qty * price).toFixed(2)); //D

  var totals = []; //E
  $('.total').each(function() {
    totals.push(Number($(this).val()));
  }); //F
  $('.grand').val(totals.reduce((sum, cur) => sum + cur).toFixed(2)); //G
});

table {
  table-layout: fixed;
}

td {
  width: 6ch
}

[readonly] {
  border: 0;
  width: 6ch;
  text-align: right
}

[type=number] {
  text-align: right
}

<table>
  <tr>
    <td style="font-weight: 600;">Adult</td>
    <td><input class="price" name='price' value='150.00' readonly></td>
    <td>
      <input class="qty" name="qty" min="0" max="3" type="number" value="0" class="form-control">
    </td>
    <td>
      <input class="total" name='total' readonly>
    </td>
  </tr>
  <tr>
    <td style="font-weight: 600;">Senior</td>
    <td><input class="price" name='price' value='100.00' readonly></td>
    <td>
      <input class="qty" name="qty" min="0" max="3" type="number" value="0" class="form-control">
    </td>
    <td>
      <input class="total" name='total' readonly>
    </td>
  </tr>
  <tr>
    <td style="font-weight: 600;">Child</td>
    <td><input class="price" name='price' value='75.00' readonly></td>
    <td>
      <input class="qty" name="qty" min="0" max="3" type="number" value="0">
    </td>
    <td>
      <input class="total" name='total' readonly>
    </td>
  </tr>
  <tr>
    <td colspan='3' style='text-align:right;'>Total</td>
    <td><input class='grand' name='grand' value='0' readonly></td>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

我为你做了一个有效的例子。

$('.inputs').each(function(){
  $(this).on('change keyup', function(){
    let sumTotal = 0;
    $('.inputs').each(function(){
      sumTotal += $(this).val() * +$(this).parent().next().data('price');
    });
    $('.total').text(`${sumTotal} $`);
  });
});

td:nth-child(3),
th:nth-child(3){
  text-align:center;
}

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
  <body>
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-12">
        <table class="table table-hover">
          <thead>
            <tr>
              <th></th>
              <th>QTY</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Child</td>
              <td><input type="number" class="inputs form-control" value="0" min="0" max="999"></td>
              <td class="price" data-price="150">150 $</td>
            </tr>
            <tr>
              <td>Adult</td>
              <td><input type="number" class="inputs form-control" value="0" min="0" max="999"></td>
              <td class="price" data-price="200">200 $</td>
            </tr>
            <tr>
              <td>Adult Plus</td>
              <td><input type="number" class="inputs form-control" value="0" min="0" max="999"></td>
              <td class="price" data-price="250">250 $</td>
            </tr>
            <tr>
              <td>Total - </td>
              <td></td>
              <td class="total">0.00 $</td>
            </tr>
          </tbody>
        </table>
        </div>
      </div>
    </div>
  </body>
</html>

（https://codepen.io/bichiko/pen/JQWomy）

Answer 4

这是一个应您所需的解决方案。

与您的代码相比，主要更改是：

使用类代替ID来标识每一行中的元素。这意味着您可以使用相同的事件处理代码来处理对所有字段的更改。我已经为您所有的数量字段提供了.qty类，然后将事件绑定到该类，因此该类中的所有元素都将运行相同的功能。
在函数中，我去除了对字段的所有直接引用-相反，为了获取价格字段和相关类型的总计字段，代码使用了字段之间的相对位置在页面中，它使用.parent（）、. next（）和.prev（）函数来查找与更改数量字段位于同一表行中的总计字段和金额字段（始终为{{1 }}在事件处理程序中），以便它在正确的字段上进行计算。
为计算最终的总计，我定义了一个单独的函数。再次使用类选择器标识所有“金额”字段，并将这些值中的每一个相加在一起得出总计。由于此函数在事件处理程序的末尾触发，因此无论何时更新一个数量，它都将始终更新总计。

其他较小更改：

使用.on（）代替deprecated .bind（）

this

jQuery(".qty").on('keyup mouseup', function() {
  var tdElement = jQuery(this).parent();
  var qty = parseInt(this.value);
  var fee = parseFloat(tdElement.prev(".price").text());
  var typeTotal = qty * fee;
  tdElement.next(".amount").html(typeTotal);
  calcFinalTotal();
});

function calcFinalTotal()
{
  var finalTotal = 0;
  $(".amount").each(function() {
   finalTotal += parseFloat($(this).text());
  });
  $("#total").text(finalTotal); 
}

td, th
{
  border: solid 1px #cccccc;
  padding: 5px;
  text-align:left;
}
table {
  border-collapse: collapse;
}

Answer 5

这是您的问题的重中之重，请尝试使用对象

var data = {a:0, b:0, c: 0} 

function one (){
  data.a = data.a + 10
  console.log(data.a)
  total()
}

function two (){
  data.b = data.b + 10
  total()
  console.log(data.b)
}

function three () {
  data.c = data.c + 30
  total()
  console.log(data.c)
}

function total () {
  var totaly = data.a + data.b + data.c
  console.log('Total input :', totaly)
}

<button onclick="one()"> get A </button>
<button onclick="two()"> get B</button>
<button onclick="three()"> get  C </button>

如何从三个函数获取值并实时更新它们？

更新：

5 个答案: