Question

我想使用jQuery计算商品数量的商品价格总和。输入要计算的数量并给出总额后，我将使用动态HTML输入字段。请参见下面的代码

我的HTML代码

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".add_new_field"); //Fields wrapper
    var add_button      = $(".add_another_product"); //Add button ID
    
    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="add_new_field"><div class="row"><div class="col-md-4"><div class="form-group"><label class="col-form-label"> Enter Product Name</label><input type="text" class="form-control" name="pname[]" placeholder="Product Name"  tabindex="1"/></div></div><div class="col-md-4"><div class="form-group"><label class="col-form-label"> No. of Pieces</label><input type="text" class="form-control" name="pcount[]" placeholder="Product Inventory" tabindex="2" /></div></div><div class="col-md-3"><div class="form-group"><label class="col-form-label"> Estimated Amount</label><input type="text" class="form-control" name="estamount[]" placeholder="Product Inventory" tabindex="2" /></div><p>Amount: <span id="Amount"></span></p></div><a href="#" class="remove_field"><i class="fa fa-remove"></i></a></div></div>'); //add input box
        }
    });
    
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

$('#EstmTotal').blur(function() {

  $('.add_new_field').each(function() {
    $(this).find('#Amount').html($('#PCount(0)', this).val() * $('#EstmTotal(0)', this).val());
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_new_field">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label class="col-form-label"> Enter Product Name</label>
        <input type="text" class="form-control" name="pname[]" id="PName" placeholder="Product Name" />
      </div>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <label class="col-form-label"> No. of Pieces</label>
        <input type="text" class="form-control" name="pcount[]" id="PCount" placeholder="No.Of Items" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label class="col-form-label"> Estimated Amount</label>
        <input type="text" class="form-control" name="estamount[]" id="EstmTotal" placeholder="Estimated Amount of Each" />
      </div>
      <p>Amount: <span id="Amount"></span></p>
    </div>
    <!--<div class="col-md-1 removebtn"><a href="#" class="remove_field"><i class="fa fa-remove"></i></a></div>-->

  </div>
</div>

<button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>

请查看图片以更好地理解问题

总是有讨论的选择

Answer 1

请在此处输入完整代码。它会根据您的要求工作。

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  ></script>
<script type="text/javascript">
    function calculate(id){ console.log(id);
        // $('#EstmTotal').on('blur',function(){
        $(id).parents('.add_new_field').each(function() {
            var count = $(this).find("#PCount").val();
            var amount = $(this).find("#EstmTotal").val();
            $(this).find('#Amount').html(count*amount);
        });

    // });
    }
    $(document).ready(function(){

        $(".add_another_product").on('click',function(){
            var html = '<div class="add_new_field">';
                html += '<div class="row">'; 
                html += '<div class="col-md-4">';
                html += '<div class="form-group">';    
                html += '<label class="col-form-label"> Enter Product Name</label>';
                html += '<input type="text" class="form-control" name="pname[]" id="PName" placeholder="Product Name"/></div></div>';
                html += '<div class="col-md-4"><divclass="form-group"><label class="col-form-label"> No. of Pieces</label>';
                html += '<input type="text" class="form-control" name="pcount[]" id="PCount" placeholder="No.Of Items"/>';
                html += '</div></div>';

                html += '<div class="col-md-3">';
                html += '<div class="form-group">';    
                html += '<label class="col-form-label"> Estimated Amount</label><input type="text" class="form-control" name="estamount[]" id="EstmTotal" placeholder="Estimated Amount of Each" onblur="calculate(EstmTotal)" />';
                html += '</div><p>Amount: <span id="Amount"></span></p></div>'; 
                html += '</div></div>';
            $(this).before(html);
        })
    })  
</script>
</head>
<body>
    <div class="add_new_field"> 
            <div class="row"> 
                <div class="col-md-4">
                    <div class="form-group">    
                        <label class="col-form-label"> Enter Product Name</label>
                        <input type="text" class="form-control" name="pname[]" id="PName" placeholder="Product Name"/>
                    </div>
                </div> 

                <div class="col-md-4">
                    <div class="form-group">    
                        <label class="col-form-label"> No. of Pieces</label>
                        <input type="text" class="form-control" name="pcount[]" id="PCount" placeholder="No.Of Items"/>
                    </div>
                </div> 

                <div class="col-md-3">
                    <div class="form-group">    
                        <label class="col-form-label"> Estimated Amount</label>
                        <input type="text" class="form-control" name="estamount[]" id="EstmTotal" onblur="calculate(EstmTotal)" placeholder="Estimated Amount of Each"/>
                    </div>
                    <p>Amount: <span id="Amount"></span></p>
                </div> 
                <!--<div class="col-md-1 removebtn"><a href="#" class="remove_field"><i class="fa fa-remove"></i></a></div>-->

               </div>
            </div>

            <button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>

</body>
</html>

Answer 2

请勿对多个元素使用相同的ID，而应使用用户class而不是ID。参见下面的代码以获取金额

$(function(){
   $(document).on("blur", "div.row .col-md-3 input[name='estamount[]']", function(){
      var $row = $(this).closest('.row'); // get parent row
      var est = $(this).val(); // read estimante
      var count = $row.find('input[name="pcount[]"]').val(); // read count
      $row.find('span.Amount').html(est*count); // put product
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_new_field"> 
            <div class="row"> 
                <div class="col-md-4">
                    <div class="form-group">    
                        <label class="col-form-label"> Enter Product Name</label>
                        <input type="text" class="form-control" name="pname[]" placeholder="Product Name"/>
                    </div>
                </div> 

                <div class="col-md-4">
                    <div class="form-group">    
                        <label class="col-form-label"> No. of Pieces</label>
                        <input type="text" class="form-control" name="pcount[]" placeholder="No.Of Items"/>
                    </div>
                </div> 

                <div class="col-md-3">
                    <div class="form-group">    
                        <label class="col-form-label"> Estimated Amount</label>
                        <input type="text" class="form-control" name="estamount[]" placeholder="Estimated Amount of Each"/>
                    </div>
                    <p>Amount: <span class="Amount"></span></p>
                </div> 
                <!--<div class="col-md-1 removebtn"><a href="#" class="remove_field"><i class="fa fa-remove"></i></a></div>-->

               </div>
            </div>

            <button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>

Answer 3

我对您的代码进行了以下更改，在其中您找到了数组内的第一个元素。您会得到理想的结果

$('#EstmTotal').blur(function() {

  $('.add_new_field').each(function() {
    var elem = $($('#PCount')[0]).val();
    var elem2 = $($('#EstmTotal')[0]).val();
    $(this).find('#Amount').html(elem * elem2);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_new_field">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label class="col-form-label"> Enter Product Name</label>
        <input type="text" class="form-control" name="pname[]" id="PName" placeholder="Product Name" />
      </div>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <label class="col-form-label"> No. of Pieces</label>
        <input type="text" class="form-control" name="pcount[]" id="PCount" placeholder="No.Of Items" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label class="col-form-label"> Estimated Amount</label>
        <input type="text" class="form-control" name="estamount[]" id="EstmTotal" placeholder="Estimated Amount of Each" />
      </div>
      <p>Amount: <span id="Amount"></span></p>
    </div>
    <!--<div class="col-md-1 removebtn"><a href="#" class="remove_field"><i class="fa fa-remove"></i></a></div>-->

  </div>
</div>

<button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>

Answer 4

$('#EstmTotal').blur(function(){

        $('.add_new_field').each(function() {
            $(this).find('#Amount').html($('#PCount').val()*$('#EstmTotal').val());
        });

});

JsFiddle source

Answer 5

我稍微更改了您的代码。现在，它检查两个元素的模糊事件，并检查两个元素是否都具有值。如果两者都设置，则设置计算值。如果没有，我将清空div。

还将值解析为浮点数。如果愿意，可以将其更改为整数。数字的输入检查与整数相同。我将数字四舍五入到两位小数，主要是为了解决浮点数精度问题。

最后，由于我认为您将能够动态创建更多行，因此我做了由.add_new_field元素委托的blur事件。这是假设您的
.add_new_field是静态元素。如果不是，请将其更改为该行的最接近的静态父级。为此，我还将某些id选择器更改为类选择器，因为id需要唯一。

$('.add_new_field').on('blur', '.EstmTotal, .PCount', function() {
  $(this).closest('.row').each(function() {
    var pcCount = parseFloat($(this).find('.PCount', this).val());
    var estTotal = parseFloat($(this).find('.EstmTotal', this).val());

    if (typeof pcCount === 'number' && pcCount && typeof estTotal === 'number' && estTotal) {
      var calculatedValue = pcCount * estTotal;
      calculatedValue = Math.round(calculatedValue * 100) / 100;
      $(this).find('.Amount').text(calculatedValue);
    } else {
      $(this).find('.Amount').text('');
    }
  });
});

$('.add_another_product').on('click', function(){
  $('.add_new_field').append($('.row').first().clone());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_new_field">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label class="col-form-label"> Enter Product Name</label>
        <input type="text" class="form-control" name="pname[]" placeholder="Product Name" />
      </div>
    </div>

    <div class="col-md-4">
      <div class="form-group">
        <label class="col-form-label"> No. of Pieces</label>
        <input type="text" class="form-control PCount" name="pcount[]" placeholder="No.Of Items" />
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <label class="col-form-label"> Estimated Amount</label>
        <input type="text" class="form-control EstmTotal" name="estamount[]" placeholder="Estimated Amount of Each" />
      </div>
      <p>Amount: <span class="Amount"></span></p>
    </div>
    <!--<div class="col-md-1 removebtn"><a href="#" class="remove_field"><i class="fa fa-remove"></i></a></div>-->

  </div>
</div>

<button class="add_another_product">Add another Product <i class="fa fa-plus"></i></button>

使用jQuery使用动态HTML输入字段将项目总数转换为项目价格

5 个答案: