Question

我在第三个输入字段中根据两个输入字段中填充的值进行计算。在这里，我有多排。每行计算应该单独完成，所以我使用每个函数。但计算不起作用。我是Jquery的新手，所以代码出错了？

     <table>
        <tr>
        <th><?= __('Quantity Offered')?></th>
        <th><?= __('Offer Price')?></th>
        <th><?= __('Total Offer Price')?></th>
        </tr>
        <tr class="productNRow">
        <td><?php echo $this->Form->input("supplier_offer_products.0.qty_offered",['id'=>'qtyOffered']);?></td>
        <td><?php echo $this->Form->input("supplier_offer_products.0.offer_price",['id'=>'priceOffered']);?></td>
        </tr>
        <tr class="productNRow">
        <td><?php echo $this->Form->input("supplier_offer_products.1.qty_offered",['id'=>'qtyOffered']);?></td>
        <td><?php echo $this->Form->input("supplier_offer_products.1.offer_price",['id'=>'priceOffered']);?></td>
        </tr>
     </table>


 <script>
     $(document).ready(function(){
        $(".productNRow").each(function(){
           var sentRec = $(this);
           var total;
              $(this).find("#qtyOffered").on('change', function () {

                  var qty = $(sentRec).find("#qtyOffered").val();
                  var offer = $(sentRec).find("#priceOffered").val();
                  var total = qty * offer;
                  $('#totalOrder').val(total);

              });    

        }); 


});

Answer 1

您不能拥有多个ID。使用类并添加缺少的#totalOrder元素 jQuery和PHP可能看起来像这样：

jQuery(function( $ ) {

  $(".productNRow").each(function() {

    var $row = $(this);
    var $qty = $row.find(".qtyOffered"); // use classes! (see PHP too)
    var $prc = $row.find(".priceOffered");
    var $tot = $row.find(".totalOrder");

    $qty.on('input', function() {
      var qty = $(this).val();
      var offer = $prc.val();
      var total = qty * offer;
      $tot.val(total);
    });

  });


});

<table>
  <tr>
    <th>Quantity Offered</th>
    <th>Offer Price</th>
    <th>Total Offer Price</th>
  </tr>
  <tr class="productNRow">
    <td>
      <?php echo $this->Form->input("supplier_offer_products.0.qty_offered",['class'=>'qtyOffered']);?>
    </td>
    <td>
      <?php echo $this->Form->input("supplier_offer_products.0.offer_price",['class'=>'priceOffered']);?>
    </td>
    <td>
       <input class="totalOrder">
    </td>
  </tr>
  <tr class="productNRow">
    <td>
      <?php echo $this->Form->input("supplier_offer_products.1.qty_offered",['class'=>'qtyOffered']);?>
    </td>
    <td>
      <?php echo $this->Form->input("supplier_offer_products.1.offer_price",['class'=>'priceOffered']);?>
    </td>
    <td>
       <input class="totalOrder">
    </td>
  </tr>
</table>

或反过来（输入→父→输入）而不使用.each()方法

jQuery(function( $ ) {

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

    var $row = $(this).closest(".productNRow");
    var $prc = $row.find(".priceOffered");
    var $tot = $row.find(".totalOrder");

    var qty = $(this).val();
    var offer = $prc.val();
    var total = qty * offer; 
    $tot.val(total);

  });

});

计算两个输入字段到第三个输入字段，在jquery

1 个答案: