jQuery 从相同的 class 中获取价值

Question

我有这个文本输入，由 jquery 动态生成。但基本上，如果你从 HTML 视角看，它看起来像这样：

<div class="po-row">
    <input class="po-quantity">
    <input class="po-price">    
</div>

<div class="po-row">
    <input class="po-quantity">
    <input class="po-price">    
</div>

<div class="po-row">
    <input class="po-quantity">
    <input class="po-price">    
</div>

现在，我想做这个计算：

每个po-row必须有subtotal，按po-quantity * po-price

计算

每一行的所有小计都将合计为总计。这是我所做的，但仅适用于第一行：

$(".po-row").each(function(){
    $(".po-price").blur(function(){
        var quantity = $(".po-quantity").val();
        var price = $(".po-price").val();
        var subtotal = quantity * price;
        $(".total").text(subtotal);
    });         
});

如何使jqueryeach文学在这种情况下有效？谢谢

Answer 1

更改 each 和 blur 的顺序。这将使每个 .po-price 元素的 blur 事件的计算运行。

$(".po-price").blur(function() {
    var total = 0;
    $(".po-row").each(function() {
        var quantity = $(".po-quantity").val();
        var price = $(".po-price").val();

        total += quantity * price;
    });
    $(".total").text(total); // Update the total
});

Answer 2

您需要修改逻辑以计算 blur() 处理程序中的所有行，并将选择器限制为循环当前行中的价格和数量字段。试试这个：

$(document).on('blur', '.po-price', function () {
    var subtotal = 0;
    $('.po-row').each(function() {
        var quantity = $(this).find(".po-quantity").val();
        var price = $(this).find(".po-price").val();
        subtotal += quantity * price;
    });
    $(".total").text(subtotal);
});

Example fiddle

请注意，我在示例中使用 document 作为主要选择器。对于您的工作代码，您应该使用 .po-price 最近的父元素，它在页面加载时 DOM 中可用。

Answer 3

尝试使用 each 语句，使用 :first 和 :last 确定输入：

  var total = 0;
  $('.po-row').each(function() {
    total += $(this).find('input:first').val() * $(this).find('input:last').val();
  });
  alert(total);

window.calc = function() {
  var total = 0;
  $('.po-row').each(function() {
    total += $(this).find('input:first').val() * $(this).find('input:last').val();
  });
  alert(total);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="po-row">
  <input class="po-quantity">
  <input class="po-price">
</div>

<div class="po-row">
  <input class="po-quantity">
  <input class="po-price">
</div>

<div class="po-row">
  <input class="po-quantity">
  <input class="po-price">
</div>
<button type="button" onclick="calc()">Calculate</button>

jQuery 从相同的 class 中获取价值

jQuery get value from same class

javascript

jquery

event-handling