Question

我使用下面的代码将数量乘以价格。代码工作正常，但是当我有多行时，它会将价格从第一行添加到第二行

如何让价格仅显示该行而不是之前的行？

我创造了一个小提琴来展示我想要做的事情

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>demo</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>


  <style type='text/css'>

  </style>

          <script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.minus, .plus').click(function (e) {
    e.preventDefault();    
    var $input = $(this).siblings('.qty');
    var val = parseInt($input.val(), 10);
    $input.val(val + ($(this).hasClass('minus') ? -1 : 1));
});

});//]]>  

</script>

<script type='text/javascript'>//<![CDATA[ 
$(function(){
$('.minus, .plus').click(function () {
    var sibs = $(this).siblings();
    var quantity = $('.qty').val();

    var priceItem = sibs.filter(".price").val(); 

    var total2 = quantity * priceItem;  
    var total = (+total2 + +priceItem);  



    sibs.filter(".total").val(total);












});
});//]]>  

</script>


</head>
<body>

 <?php 
$x=1; 
while($x<=5)
  {
  ?>
  <div>Qty:
        <span  class='minus' class="signrm">&mdash;</span> <input type="text" name="qty" class="txt qty" value="1" />    <span class='plus' >+</span>
    <br/>Price:
    <input type="text" name="price" class="txt price" value="500" />
    <br/>Total:
    <input type="text" name="total" class="txt total" value="500" />
</div>
<?php 
 $x++; } ?>


</body>


</html>

Answer 1

你在正确的轨道上，只要确保你从按钮的兄弟姐妹那里获得所有价值。您的加载点击事件窗口也不起作用。我无法看到你遇到的同样问题。但我会在一次点击事件中而不是两次执行所有代码。

这是一个fiddle示例，下面是代码。

 $(function () {
    $('.minus, .plus').click(function () {
        var $qty = $(this).siblings('.qty');
        var qtyCounter = parseInt($qty.val());
        if($(this).hasClass('plus'))
            qtyCounter++; 
        else
            qtyCounter--;
        $qty.val(qtyCounter);
        var pricePerUnit = $(this).siblings('.price').val();
        var quantity = $(this).siblings('.qty').val();
        var total = quantity * pricePerUnit;
        $(this).siblings('.total').val(total);
    });
});

扣除或添加数量时显示每行的价格

1 个答案: