如何显示总计使用＆＃34; onClick＆＃34;？

时间：2018-04-27 19:52:11

标签： javascript html onclick display

我正在收拾一个项目，然后突然难倒。我正在努力获得＆＃34; Total＆＃34;仅在＆＃34; CHECKOUT＆＃34;时显示点击。目前，它会自动填充。我已经在线查看了这样做的不同功能，但我没有运气。任何指导都表示赞赏。

伪代码看起来像：onClick（）返回总计

＆＃13;
＆＃13; 
$(document).ready(function() {

  $(document).on("input paste keyup", ".product_qty", function(event) {

    var product_quantity = 0;
    var product_price = 0;
    var gst_amount = 0;

    var sub_total = 0;
    var total_qty = 0;
    var grand_total = 0

    product_quantity = $(this).val();
    product_price = $(this).parent().prev().html();

    sub_total = product_price * product_quantity;

    $(this).parent().next().html(sub_total);


    $('.product_qty').each(function(k, v) {
      product_quantity = parseInt($(this).val()) ? parseInt($(this).val()) : 0;
      product_price = parseFloat($(this).parent().prev().html()) ? parseFloat($(this).parent().prev().html()) : 0;

      console.log(product_quantity);
      console.log(product_price);

      sub_total = parseFloat(product_price * product_quantity);

      console.log(sub_total);

      total_qty += product_quantity;

      grand_total += sub_total;

    });

    if (grand_total > 0) {
      gst_amount = (grand_total * 8) / 100;
    }

    $("#total_qty").html(total_qty);
    $("#total_amount").html(grand_total);

    grand_total += gst_amount;

    $("#gst_amount").html(gst_amount);
    $("#discount_amount").html(0);
    $("#grand_total").html(grand_total);

  });
  //
  $(document).on("click", ".delete", function(event) {
    var cart_item = 0;
    $(this).parent().parent().remove();
    cart_item = $('.product_qty').length;
    if (cart_item <= 0) {
      $("#total_qty").html('0');
      $("#total_amount").html('0');
      $("#gst_amount").html('0');
      $("#discount_amount").html(0);
      $("#grand_total").html('0');
    } else {
      $('.product_qty').trigger('keyup');
    }

  });


});
＆＃13; 
<!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="bs-example">
  <div class="table-responsive">
    <table class="table table-bordered">
      <colgroup>
        <col class="con1" style="align: center; width: 30%" />
        <col class="con1" style="align: center; width: 20%" />
        <col class="con0" style="align: center; width: 20%" />
        <col class="con1" style="align: center; width: 20%" />
        <col class="con1" style="align: center; width: 10%" />
      </colgroup>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Sub Total</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td>Mens T Shirt</td>
          <td class="product_price">25</td>
          <td><input type="text" name="qty" class="product_qty" value="0"></td>
          <td class="amount_sub_total"></td>
          <td><a href="#" class="delete">x</a></td>
        </tr>
        <tr>
          <td>Hat</td>
          <td class="product_price">15</td>
          <td><input type="text" name="qty" class="product_qty" value="0"></td>
          <td class="amount_sub_total"></td>
          <td><a href="#" class="delete">x</a></td>
        </tr>
        <tr>
          <td>Womens T Shirt</td>
          <td class="product_price">20</td>
          <td><input type="text" name="qty" class="product_qty" value="0"></td>
          <td class="amount_sub_total"></td>
          <td><a href="#" class="delete">x</a></td>
        </tr>

        <tr>
          <td>Total</td>
          <td>&nbsp;</td>
          <td id="total_qty"></td>
          <td id="total_amount"></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Tax (8%)</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td id="gst_amount"></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td colspan="5" class="checkout"><a href="#">CHECKOUT</a></td>
        </tr>
        <tr>
          <td>Total Payment</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td id="grand_total"></td>
          <td>&nbsp;</td>
        </tr>
        <tr>

        </tr>
      </tbody>
    </table>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

不是在input paste keyup处理程序中运行总代码，而是在click链接的CHECKOUT处理程序中运行它。

$(document).ready(function() {

  $(".checkout a").on("click", function(event) {

    var total_qty = 0;
    var grand_total = 0

    $('.product_qty').each(function(k, v) {
      product_quantity = parseInt($(this).val()) ? parseInt($(this).val()) : 0;
      product_price = parseFloat($(this).parent().prev().html()) ? parseFloat($(this).parent().prev().html()) : 0;

      console.log(product_quantity);
      console.log(product_price);

      var sub_total = parseFloat(product_price * product_quantity);

      console.log(sub_total);

      total_qty += product_quantity;

      grand_total += sub_total;

    });

    if (grand_total > 0) {
      gst_amount = (grand_total * 8) / 100;
    }

    $("#total_qty").html(total_qty);
    $("#total_amount").html(grand_total);

    grand_total += gst_amount;

    $("#gst_amount").html(gst_amount);
    $("#discount_amount").html(0);
    $("#grand_total").html(grand_total);
  });

  $(document).on("input paste keyup", ".product_qty", function(event) {

    var product_quantity = 0;
    var product_price = 0;
    var gst_amount = 0;

    var sub_total = 0;

    product_quantity = $(this).val();
    product_price = $(this).parent().prev().html();

    sub_total = product_price * product_quantity;

    $(this).parent().next().html(sub_total);
  });
  //
  $(document).on("click", ".delete", function(event) {
    var cart_item = 0;
    $(this).parent().parent().remove();
    cart_item = $('.product_qty').length;
    if (cart_item <= 0) {
      $("#total_qty").html('0');
      $("#total_amount").html('0');
      $("#gst_amount").html('0');
      $("#discount_amount").html(0);
      $("#grand_total").html('0');
    } else {
      $('.product_qty').trigger('keyup');
    }

  });

});
<!DOCTYPE html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="bs-example">
  <div class="table-responsive">
    <table class="table table-bordered">
      <colgroup>
        <col class="con1" style="align: center; width: 30%" />
        <col class="con1" style="align: center; width: 20%" />
        <col class="con0" style="align: center; width: 20%" />
        <col class="con1" style="align: center; width: 20%" />
        <col class="con1" style="align: center; width: 10%" />
      </colgroup>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Sub Total</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td>Mens T Shirt</td>
          <td class="product_price">25</td>
          <td><input type="text" name="qty" class="product_qty" value="0"></td>
          <td class="amount_sub_total"></td>
          <td><a href="#" class="delete">x</a></td>
        </tr>
        <tr>
          <td>Hat</td>
          <td class="product_price">15</td>
          <td><input type="text" name="qty" class="product_qty" value="0"></td>
          <td class="amount_sub_total"></td>
          <td><a href="#" class="delete">x</a></td>
        </tr>
        <tr>
          <td>Womens T Shirt</td>
          <td class="product_price">20</td>
          <td><input type="text" name="qty" class="product_qty" value="0"></td>
          <td class="amount_sub_total"></td>
          <td><a href="#" class="delete">x</a></td>
        </tr>

        <tr>
          <td>Total</td>
          <td>&nbsp;</td>
          <td id="total_qty"></td>
          <td id="total_amount"></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Tax (8%)</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td id="gst_amount"></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td colspan="5" class="checkout"><a href="#">CHECKOUT</a></td>
        </tr>
        <tr>
          <td>Total Payment</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td id="grand_total"></td>
          <td>&nbsp;</td>
        </tr>
        <tr>

        </tr>
      </tbody>
    </table>
  </div>
</div>

答案 1 :(得分：0)

我知道Bramar已经帮助了你，我只是想让你的代码更清洁。

$(document).on("input paste keyup", ".product_qty", function(event){totals(this)});
  
  //
$(document).on("click", ".delete", function(event){
  var cart_item = $('.product_qty').length;
  $(this).parent().parent().remove();
  if (cart_item <= 0) 
    $("#total_qty, #total_amount, #gst_amount, #discount_amount, #grand_total").html(0);
  else 
    $('.product_qty').trigger('keyup');
});
  
getCheckout = function(){$("#grand_total").html(global_grand_total)}

var global_grand_total = 0;

totals = function(obj){
  var product_quantity = $(obj).val();
  var product_price = $(obj).parent().prev().html();
  var sub_total = product_price * product_quantity;

  var gst_amount = 0, total_qty = 0, grand_total = 0;
  $(obj).parent().next().html(sub_total);

  $('.product_qty').each(function(k, v) {
    total_qty += product_quantity = v.value|0 ? v.value|0 : 0;
    product_price = +(temp = $(obj).parent().prev().html()) ? +temp : 0;
    grand_total += sub_total = +product_price * +product_quantity;
  });

  if (grand_total)
    gst_amount = grand_total * 8 / 100;

  $("#total_qty").html(total_qty);
  $("#total_amount").html(grand_total);

  grand_total += gst_amount;

  $("#gst_amount").html(gst_amount);
  $("#discount_amount").html(0);
  global_grand_total = grand_total;
  return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="bs-example">
  <div class="table-responsive">
    <table class="table table-bordered">
      <colgroup>
        <col class="con1" style="align: center; width: 30%" />
        <col class="con1" style="align: center; width: 20%" />
        <col class="con0" style="align: center; width: 20%" />
        <col class="con1" style="align: center; width: 20%" />
        <col class="con1" style="align: center; width: 10%" />
      </colgroup>
      <thead>
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
          <th>Sub Total</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td>Mens T Shirt</td>
          <td class="product_price">25</td>
          <td><input type="text" name="qty" class="product_qty" value="0"></td>
          <td class="amount_sub_total"></td>
          <td><a href="#" class="delete">x</a></td>
        </tr>
        <tr>
          <td>Hat</td>
          <td class="product_price">15</td>
          <td><input type="text" name="qty" class="product_qty" value="0"></td>
          <td class="amount_sub_total"></td>
          <td><a href="#" class="delete">x</a></td>
        </tr>
        <tr>
          <td>Womens T Shirt</td>
          <td class="product_price">20</td>
          <td><input type="text" name="qty" class="product_qty" value="0"></td>
          <td class="amount_sub_total"></td>
          <td><a href="#" class="delete">x</a></td>
        </tr>

        <tr>
          <td>Total</td>
          <td>&nbsp;</td>
          <td id="total_qty"></td>
          <td id="total_amount"></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td>Tax (8%)</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td id="gst_amount"></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td colspan="5" class="checkout"><a href="#" onclick="getCheckout()">CHECKOUT</a></td>
        </tr>
        <tr>
          <td>Total Payment</td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
          <td id="grand_total"></td>
          <td>&nbsp;</td>
        </tr>
        <tr>

        </tr>
      </tbody>
    </table>
  </div>
</div>

相关问题
最新问题