如何使用jQuery动态更新基于其他输入框的值？

Question

我试图制作购物车。

我有哪些产品的价格不同。

现在，当我尝试更改数量时，价格应根据数量和总数来改变。

但我面临的问题是当我尝试更改数量时使用以下代码，价格会更新但其他人也会更新，但我没有更改数量。

然后总计没有显示适当的总数

＆＃13;

＆＃13;

$(".quantity").change(update);

function update() {
  $(".quantity").each(function() {
    var qty = Number($(this).val());
    var net = document.getElementById("net_price").value;
    var total = qty * net;
    $('.total').html("$" + total);
    $(".grandTotal").text(calculateSum());
  });

  function calculateSum() {
    var sum = 0;
    $(".total").each(function() {
      var value = $(this).val();
      if (!isNaN(value) && value.length != 0) {
        sum += parseFloat(value);
      }
    });
    return sum;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="qty table-default">
  <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
<td class="total_price table-default total"></td>
<td><input type="hidden" id="net_price" value="">45</td>
<td class="grandTotal"></td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;

任何人都可以帮我找到灵魂

Answer 1

如果我理解正确，这可能会对你有所帮助

$('body').on('change', ".quantity", update);

function update() {

  var qty = parseInt($(this).val());
  var net = parseFloat($(this).parents('tr').find(".net_price").val());
  var total = qty * net;
  $(this).parents('tr').find(".total_price").text("$" + total);
  $(".grandTotal").text('$' + calculateSum());

  function calculateSum() {
    var sum = 0;
    $(".total_price").each(function() {
      var value = $(this).text().replace('$', '');
      if (!isNaN(value) && value.length != 0) {
        sum += parseFloat(value);
      }
    });
    return sum;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="qty table-default">
      <td><input type="text" readonly class="net_price" value="25"></td>
      <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
      <td class="total_price table-default total"></td>
  </tr>
  <tr>
    <td class="qty table-default">
      <td><input type="text" readonly class="net_price" value="25"></td>
      <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
      <td class="total_price table-default total"></td>
  </tr>
  <tr>
    <td class="qty table-default">
      <td><input type="text" readonly class="net_price" value="25"></td>
      <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
      <td class="total_price table-default total"></td>
  </tr>
  <tr>
    <td colsapn="3" class="grandTotal"></td>
  </tr>
</table>

绩效改进 通过外部提取calculateSum来提高上述代码的性能，以避免在调用update方法时一次又一次地重新创建相同的函数

$('body').on('change', ".quantity", update);

function calculateSum() {
    var sum = 0;
    $(".total_price").each(function() {
      var value = $(this).text().replace('$', '');
      if (!isNaN(value) && value.length != 0) {
        sum += parseFloat(value);
      }
    });
    return sum;
}
function update() {
  var qty = parseInt($(this).val());
  var net = parseFloat($(this).parents('tr').find(".net_price").val());
  var total = qty * net;
  $(this).parents('tr').find(".total_price").text("$" + total);
  $(".grandTotal").text('$' + calculateSum());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="qty table-default">
      <td><input type="text" readonly class="net_price" value="25"></td>
      <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
      <td class="total_price table-default total"></td>
  </tr>
  <tr>
    <td class="qty table-default">
      <td><input type="text" readonly class="net_price" value="25"></td>
      <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
      <td class="total_price table-default total"></td>
  </tr>
  <tr>
    <td class="qty table-default">
      <td><input type="text" readonly class="net_price" value="25"></td>
      <td><input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" /></td>
      <td class="total_price table-default total"></td>
  </tr>
  <tr>
    <td colsapn="3" class="grandTotal"></td>
  </tr>
</table>

Answer 2

• 您正在为HTML与值连接的元素设置$值，但在检索该值时，您使用的是.val()方法。要从元素中获取text，请改用.text方法。

• 由于值以$为前缀，因此我们无法将其用于操作，因此.data方法用于在data中为特定元素存储数值。

• jQuery.data('key')用于检索值。

＆＃13;

＆＃13;

$(".quantity").change(update);

function update() {
  $(".quantity").each(function() {
    var qty = Number($(this).val());
    var net = 10; //Static value is considered
    var total = qty * net;
    var totalElem = $('.total');
    totalElem.html("$" + total);
    totalElem.data("value", total);
    $(".grandTotal").text(calculateSum());
  });

  function calculateSum() {
    var sum = 0;
    $(".total").each(function() {
      var value = $(this).data('value');
      if (!isNaN(value) && value.length != 0) {
        sum += parseFloat(value);
      }
    });
    return sum;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="qty table-default">
      <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" />
    </td>
    <td class="total_price table-default total"></td>
    <td class="grandTotal"></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

$(".quantity").change(update);

function update() {
  // Cell Variables
  var $qty = $(this),
    $row = $qty.closest('tr'),
    $total = $row.find('.total');

  // Number Variables
  var qty = Number($qty.val()),
    price = $row.find('.price').val(),
    total = qty * price;

  // Fill Values
  $total.html("$" + total);
  $('.grandTotal').text('$' + calculateSum());
}

function calculateSum() {
  var sum = 0;
  $('.total').each(function() {
    var strTotal = $(this).text();
    var total = parseFloat(strTotal.replace(/^\D+/g, ''));

    if (!isNaN(total))
      sum += total;
  });
  return sum;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Quantity</th>
      <th>Price</th>
      <th>Total</th>
      <th>Grand Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="qty table-default">
        <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" />
      </td>
      <td><input type="hidden" class="price" value="45" />$45</td>
      <td class="total_price table-default total"></td>
      <td class="grandTotal"></td>
    </tr>
    <tr>
      <td class="qty table-default">
        <input type="number" class="quantity" value="" name="qty" maxlength="3" max="999" min="1" />
      </td>
      <td><input type="hidden" class="price" value="10" />$10</td>
      <td class="total_price table-default total"></td>
      <td class="grandTotal"></td>
    </tr>
  </tbody>
</table>