dsigh7478 2016-08-06 08:11
浏览 7
已采纳

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

I have write jquery code with use of classes, the problem is each product gets incremented even i changed for just one product. I want to do if user increment one field than the amount will calculat in his parent text-box, but actually when i increment for one product the amount increment for both product. 

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

</div>
  • 写回答

3条回答 默认 最新

  • duanjia7912 2016-08-06 08:26
    关注

    $(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()));
    });
});
*/
    <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">
-->

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 BC260Y用MQTT向阿里云发布主题消息一直错误
  • ¥20 求个正点原子stm32f407开发版的贪吃蛇游戏
  • ¥15 划分vlan后，链路不通了？
  • ¥20 求各位懂行的人，注册表能不能看到usb使用得具体信息，干了什么，传输了什么数据
  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 Centos / PETGEM
  • ¥15 划分vlan后不通了
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询（拒绝大模型回答）
  • ¥15 自适应 AR 模型 参数估计Matlab程序