Question

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

<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>

现在，我想做这个计算：

每个邮政行必须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);
    });         
});

如何使jquery each文字在这种情况下有效？谢谢

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

尝试使用的每个语句：first和：last来确定输入：

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

jQuery从同一个类

3 个答案: