Question

当用户点击绑定到某个项目的复选框时，会显示元素数量输入框和价格输入框，用户在panel_checkout上输入数量和价格。

当用户选择第一项Printers并输入quantity and price时它准确计算我的总数。

当用户选择下一个项Washing Gears并输入数量编号eg:2时，它会与2 by the price of the printer相乘。同样适用于我输入价格eg: 4，它会乘以the 4 by the quantity of the printer。

这表示点击新项目时数量和价格的输入值不会重置。我如何解决这个问题？谢谢你的帮助。

var order_container;
var quantity;
var price;
var sum;
    
function order(products) { 
  $('.panel_checkout').append('<div class="order_container"><input type="text" class="form-control quantity" id="qty" name="quantity[]" required/><input type="text" class="form-control item_price" id="price" name="price[]" required/><p class="total">USD<span class="line-total" name="total" id="total"></span></p></div>' )
}
 $('.checkout_panel').on('keyup','.quantity',function() {
  order_container = $(this).closest('div');
  quantity = Number($(this).val());  
  price = document.getElementById('price').value
  order_container.find(".total span").text(quantity * price);
  sum = 0;  
  $(".line-total").each(function(){
    sum = sum + Number($(this).text());
  })
})
 $('.checkout_panel').on('keyup','.item_price',function() {
  order_container = $(this).closest('div');   
  price = Number($(this).val()); 
  quantity = document.getElementById('qty').value   
  order_container.find(".total span").text(quantity * price);
  sum = 0;
  points = 0;
  $(".line-total").each(function(){
    sum = sum + Number($(this).text());
  })  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" onclick="return order(this)" />
<div class="panel_checkout"></div>

Answer 1

您的代码完全被破坏了。请参阅下面的代码段：

＆＃13;

var sum = 0;

function order() {
  $( '.panel_checkout' ).append( '<div class="order_container"><input type="number" min="1" value="1" class="form-control quantity" name="quantity[]" oninput="qt( this )" placeholder="Quantity" required/><input type="number" class="form-control item_price" name="price[]" oninput="pr( this )" placeholder="Price" required/> <span class="line-total" name="total"></span> USD</div>' )
}

function qt( el ) {
  var order_container, quantity, price;

  order_container = $( el ).closest( 'div' );
  quantity = Number( $( el ).val() );
  price = order_container.find( '.item_price' ).val();
  order_container.find( '.line-total' ).text( quantity * price );
  sum = 0;

  $( '.line-total' ).each( function() {
    sum = sum + Number( $( this ).text() )
  } )

  $( '.sum' ).text( sum )
}

function pr( el ) {
  var order_container, quantity, price;

  order_container = $( el ).closest( 'div' );
  price = Number( $( el ).val() );
  quantity = order_container.find( '.quantity' ).val();
  order_container.find( '.line-total' ).text( quantity * price );
  sum = 0;

  $( '.line-total' ).each( function() {
    sum = sum + Number( $( this ).text() )
  } )

  $( '.sum' ).text( sum )
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="button" value="Add" onclick="order()"/>
<p>
  <div class="panel_checkout"></div>
</p>
<hr/>
<p>Total: <span class="sum">0</span> USD</p>

＆＃13;

循环中输入文本的空值 - JS

1 个答案: