javascript - 如何通过增加输入数字来动态更改价格

问题描述

我创建了我的个人项目，我将此系统称为订购系统，为此我使用了 laravel 以及前端 javascript 和 jquery。

我有问题

问题：

我使用 jquery 的 append 函数将值传输到另一端。所以我附加输入类型号，其值自动等于1

如果我增加输入类型数字的值，如果我增加数字的值，价格如何翻倍？

我的输出示例

我的前端代码：

        var tbody = $('#myTable').children('tbody');

        //Then if no tbody just select your table 
        var table = tbody.length ? tbody : $('#myTable');



        //my logic to increment quantity but not working.


        $("#qty_change").bind('keyup mouseup', function () {
            alert("changed");            
        });


        //function for getting the data from search product by clicking to the table row

        $("tr#productClicked").click(function () {

            //to get the price in tr
            var price = $(this).closest("tr").find(".menu_price").text();

            //to get the menu in tr
            var menu_name = $(this).closest("tr").find(".menu_name").text();

            //row count
            var rowCount = $('table#myTable tr:last').index() + 1;

            //append input to quantity the value is 1
            var input = '<input type="number" name="qty_number" class="form-control" value="1" id="qty_change" />';



            //Item must be editable
            var contenteditable = 'contenteditable=true';



            table.append('<tr><td>'+rowCount+'</td><td class="total">'+input+'</td><td '+contenteditable+'>'+menu_name+'</td><td>'+price+'</td><td>'+price+'</td></tr>');


        });

html表：

 <table class="table table-hover" id="myTable">
<thead>
<tr style="font-size: 14px; ">
    <th scope="col">#</th>
    <th scope="col">Qty</th>
    <th scope="col">Item</th>
    <th scope="col" style="text-align: right">Cost</th>
    <th scope="col" style="text-align: right">Total</th>
</tr>
</thead>
<tbody style="font-size:14px;">                 
<tr>
    {{-- <td>1</td>
    <td>x 2</td>
    <td contenteditable='true'>Feast Chicken</td>
    <td align="right">$10.00</td>
    <td align="right">$20.00</td> --}}
</tr>
</tbody>

</table>

新更新：

$('.amount > input[type="number"]').on('input', updateTotal);

        function updateTotal(e){
          var value = e.target.value;

          // Don't do anything if value is not valid
          // else you will see NaN in result.
          if (!value || value < 0)
            return;

          var $parentRow = $(e.target).parent().parent();
          var $siblingTotal = $parentRow.find('.total');
          var $siblingCost = $parentRow.find('.cost');

          var cost = $siblingCost.text();

          // parseInt and parseFloat because
          // `value` and `cost` are strings.
          value = parseInt(value);
          cost = parseFloat(cost);

          $siblingTotal.text(value * cost);
        }




$("tr#productClicked").click(function () {

            swal({
              title: "Are you sure?",
              text: "Once you will add it will automatically send to the cart",
              icon: "warning",
              buttons: true,
              dangerMode: true,
            })
            .then((willDelete) => {
              if (willDelete) {

                    swal("Poof! Your imaginary file has been deleted!", {
                      icon: "success",
                    });

                    swal("Menu Added", "You clicked the button!", "success");

                    //to get the price in tr
                    var price = $(this).closest("tr").find(".menu_price").text();

                    //to get the menu in tr
                    var menu_name = $(this).closest("tr").find(".menu_name").text();

                    //row count
                    var rowCount = $('table#myTable tr:last').index() + 1;

                    //append input to quantity the value is 1
                    var input = '<input type="number" value="1">';



                    //Item must be editable
                    var contenteditable = 'contenteditable=true';



                    table.append('<tr><td>'+rowCount+'</td><td class="amount">'+input+'</td><td '+contenteditable+'>'+menu_name+'</td><td class="cost">'+price+'</td><td class="total">'+price+'</td></tr>');


              } else {
                swal("Cancelled");
              }
            });

        });

标签： javascriptjqueryhtml

解决方案

使用 jQuery监听“输入”事件 .on。

（请注意，“输入”事件与 jQuery 无关，它是原生 JavaScript 的东西。）

这是一个示例代码，因为您提供的代码不完整。但是你应该能够得到这个概念：

常规代码示例

$('.amount > input[type="number"]').on('input', updateTotal);

function updateTotal(e){
  var amount = parseInt(e.target.value);
  
  if (!amount || amount < 0)
    return;
    
  var $parentRow = $(e.target).parent().parent();
  var cost = parseFloat($parentRow.find('.cost').text());
  var total = (cost * amount).toFixed(2);
  
  $parentRow.find('.total').text(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Input</th>
      <th>Cost per item</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="amount"><input type="number" value="1"></td>
      <td class="cost">27</td>
      <td class="total">27</td>
    </tr>
    <tr>
      <td class="amount"><input type="number" value="1"></td>
      <td class="cost">14.50</td>
      <td class="total">14.50</td>
    </tr>
  </tbody>
</table>

为了理解

// Get all inputs with type="number"
// that is a child of <td class="amount">.
var $amountInput = $('td.amount > input[type="number"]');

// Attach "input" event listener to the input fields
// so that we know when the value changes and handle the changes.
// In this case, the event handler is the function "updateTotal".
$amountInput.on('input', updateTotal);


function updateTotal(e){
  // Get the `input` element that triggers this event.
  var $thisInput = $(e.target);

  // Get the value of $thisInput
  var amount = $thisInput.val();
  
  // The `value` is a string,
  // so we need `parseInt` to make it a number.
  // Use `parseInt` because quantity can't have decimals.
  amount = parseInt(amount);

  // Don't do anything if value is not valid
  // else you will see NaN in result.
  if (!amount || amount < 0)
    return;

  // Get the parent <tr> of this input field
  var $parentRow = $thisInput.parent().parent();
  
  // Find the <td class="total"> element
  var $siblingTotal = $parentRow.find('.total');
  
  // Find the <td class="cost"> element
  var $siblingCost = $parentRow.find('.cost');

  // Get the cost from <td class="cost"> element
  var cost = $siblingCost.text();

  // The "cost" is a string,
  // so we need `parseFloat` to make it a number.
  // Use `parseFloat` because cost can have decimals.
  cost = parseFloat(cost);

  // Calculate the total cost
  var total = amount * cost;
  
  // .toFixed(2) to force 2 decimal places
  total = total.toFixed(2);
  
  // Update the total cost into <td class="total"> element
  $siblingTotal.text(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <th>Input</th>
      <th>Cost per item</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="amount"><input type="number" value="1"></td>
      <td class="cost">27</td>
      <td class="total">27</td>
    </tr>
    <tr>
      <td class="amount"><input type="number" value="1"></td>
      <td class="cost">14.50</td>
      <td class="total">14.50</td>
    </tr>
  </tbody>
</table>

笔记

如果您仍然难以理解，您可能需要阅读：

javascript - 如何通过增加输入数字来动态更改价格

问题描述

解决方案

推荐阅读