javascript - 当数量增加导致价格上涨时

Question

在一张表中，我有产品及其数量和价格。我正在使用加号和减号按钮来增加或减少产品的数量。我也想根据数量增加和减少价格。谁能帮我？

<table>
  <thead>
    <tr>
      <th scope="col">Company</th>
      <th scope="col">Product</th>
      <th width="200px">Quantity</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="Company"></td>
      <td id="Product"></td>
      <td>
        <div class="input-group">
          <span class="input-group-btn"><button class="btn btn-default value-control" data- 
   action="minus" data-target="font-size"><span class="glyphicon glyphicon-minus"> 
   </span></button>
          </span>
          <input type="text" value="1" class="form-control" id="font-size">
          <span class="input-group-btn"><button class="btn btn-default value-control" data-action="plus" data-target="font-size"><span class="glyphicon glyphicon-plus"></span></button>
          </span>
        </div>
      </td>
      <td id="Price"></td>
    </tr>
  </tbody>
</table>

$('#productSelect').change(function() {
  var id = $(this).val();
  if (id > 0) {
    $.get("GetProduct", {
      productId: id
    }, function(result) {
      console.log(result)
      $("#Company").text(result.CompanyName);
      $("#Product").text(result.ProductName);
      $("#Quantity").text(result.ProductQuantity);
      $("#Price").text(result.ProductPrice);
    });
  }
})

$(document).on('click', '.value-control', function() {
  var action = $(this).attr('data-action')
  var target = $(this).attr('data-target')
  var value = parseFloat($('[id="' + target + '"]').val());
  if (action == "plus") {
    value++;
  }
  if (action == "minus") {
    value--;
  }
  $('[id="' + target + '"]').val(value)
})

标签： javascriptjqueryasp.net-mvc

Answer 1

这是我的代码

$(document).ready(function(){


  var priceProduct = $("#priceProduct").attr('data-price'); 
  var total = $("#priceProduct").attr('data-total');  
  var qty=1; 
  $(".quantity").click(function(){
     
      if($(this).attr('data-action') == 'minus'){
          if(qty == 1){
             qty =1;
            return false; 
            
          }else{
            qty =qty-1; 
            total = parseInt(total) - parseInt(priceProduct);
          } 
      }else{
        qty =qty+1; 

            total = parseInt(priceProduct) + parseInt(total); 

      }
      $("#quantity_input").val(qty);
      $("#priceProduct").attr('data-total',total)
      $("#Price").text("$"+total);
       
  });

      $("#Price").text("$"+total);
      });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <table>
  <span id="priceProduct" data-price='10' data-total='10'>let suppose price would be $10</span>
  <thead>
    <tr>
      <th scope="col">Company</th>
      <th scope="col">Product</th>
      <th width="200px">Quantity</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td id="Company"></td>
      <td id="Product"></td>
      <td>
        <div class="input-group ">
          <span class="input-group-btn">
            <button class="btn btn-default value-control quantity" 
            data-action="minus" data-target="font-size"><span class="glyphicon glyphicon-minus"></span>
          </button>
          </span>
          <input type="text"  value="1" class="form-control" id="quantity_input">
          <span class="input-group-btn">
            <button class="btn btn-default value-control quantity"  data-action="plus" data-target="font-size">
              <span class="glyphicon glyphicon-plus " ></span>
            </button>
          </span>
        </div>
      </td>
      <td id="Price"></td>
    </tr>
  </tbody>
</table>