Question

我使用类编写了jquery代码，问题是每个产品都会增加，即使我改变了一个产品。我想要做的是，如果用户增加一个字段而不是在他的父文本框中计算的金额，但实际上当我为一个产品增加两个产品的金额增量时。

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function() {
  $(".quantity").change(function(){
        $(".subTotal").val(parseInt($(this).val()) * parseInt($(".price").val()));
    });
    
});

    </script>
  </head>

  <body>
<tr>
 <td><input type="text"  class="price" value="1000" readonly></td>
 <td><input type="number" min="0" class="quantity" value="1"></td>
 <td><input type="text"  class="subTotal" value="1000"></td>
</tr>
    <tr>
 <td><input type="text"  class="price" value="1000" readonly></td>
 <td><input type="number" min="0" class="quantity" value="1"></td>
 <td><input type="text"  class="subTotal" value="1000"></td>
</tr>

  </body>

</html>

＆＃13;

Answer 1

根据事件触发元素获取输入元素。使用 nextAll() 和 first() 方法获取输入。

$(document).ready(function() {
  $(".quantity").change(function() {
    // cache the `$(this)` jQuery object
    var $this = $(this);
    $this
      // get all siblings next to it with class `subTotal`
      .nextAll(".subTotal")
      // get the adjucent one
      // .nextAll(".subTotal").first() ==> .nextAll(".subTotal:first")
      .first()
      // updates its value
      .val(
        // multiply with adjucent pric input 
        ($this.val() * $this.nextAll(".price").first().val()) || 0
      );
  });
});

＆＃13;

$(document).ready(function() {
  $(".quantity").change(function() {
    var $this = $(this);
    $this.nextAll(".subTotal").first()
      .val(($this.val() * $this.nextAll(".price").first().val()) || 0);
  });
});

＆＃13;

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<input type="number" min="0" class="quantity" value="1">

<input type="text" class="price" value="1000" readonly>
<input type="text" class="subTotal" value="1000">

<input type="number" min="0" class="quantity" value="1">

<input type="text" class="price" value="1000" readonly>
<input type="text" class="subTotal" value="1000">

＆＃13;

或者使用 nextUntil() 方法，使用 filter() 方法将所有元素添加到下一个数量输入和滤镜元素。

$(document).ready(function() {
  $(".quantity").change(function() {
    // get all elements before the next quantity field
    var $ele = $(this).nextUntil('.quantity');
    $ele
    // filter out `.subTotal` from it
      .filter(".subTotal")
      // updates its value
      .val(
        // multiply with adjucent pricr input 
        (this.value * $ele.filter(".price").val()) || 0
      );
  });
});

＆＃13;

$(document).ready(function() {
  $(".quantity").change(function() {
    var $ele = $(this).nextUntil('.quantity');
    $ele.filter(".subTotal")
      .val((this.value * $ele.filter(".price").val()) || 0);
  });
});

＆＃13;

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<input type="number" min="0" class="quantity" value="1">

<input type="text" class="price" value="1000" readonly>
<input type="text" class="subTotal" value="1000">

<input type="number" min="0" class="quantity" value="1">

<input type="text" class="price" value="1000" readonly>
<input type="text" class="subTotal" value="1000">

＆＃13;

Answer 2

＆＃13;

$(function() {
  $(".quantity").change(function(){
    $(this).closest('tr').find('.subTotal').val(parseInt($(this).val()) * parseInt($(this).closest('tr').find('.price').val()));
    });
});

/*
BEFORE YOU EDITED THE QUESTION
$(function() {
  $(".quantity").change(function(){
    $(this).nextAll(".subTotal:first").val(parseInt($(this).val()) * parseInt($(this).nextAll('.price:first').val()));
    });
});
*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table>
<tr>
 <td><input type="text"  class="price" value="1000" readonly></td>
 <td><input type="number" min="0" class="quantity" value="1"></td>
 <td><input type="text"  class="subTotal" value="1000"></td>
</tr>
<tr>
 <td><input type="text"  class="price" value="1000" readonly></td>
 <td><input type="number" min="0" class="quantity" value="1"></td>
 <td><input type="text"  class="subTotal" value="1000"></td>
</tr>
</table>

<!--
BEFORE YOU EDITED THE QUESTION
<input type="number" min="0" class="quantity" value="1">
<input type="text"  class="price" value="1000" readonly>
<input type="text"  class="subTotal" value="1000">

<input type="number" min="0" class="quantity" value="1">
<input type="text"  class="price" value="1000" readonly>
<input type="text"  class="subTotal" value="1000">
-->

＆＃13;

Answer 3

如果只允许使用类，则可以尝试将每对输入包装在一个范围内，其中类/ ID从1到3。然后，在onchange函数中，您可以获取此类和循环遍历所有.price元素，直到你拥有与此相同的父节点的元素。现在知道你想要影响哪个元素，现在可以轻松地在所述元素中获取/设置文本。

在输入类型编号上计算金额时遇到问题

3 个答案: