时间戳

首页 > 解决方案 > 使用jquery根据所选项目的数量自动计算总成本

jquery - 使用jquery根据所选项目的数量自动计算总成本

问题描述

我有以下代码，旨在根据用户选择的每种类型的房间数量计算总成本。

我的问题是脚本只会增加成本，即使roomNo从较高的数字更改为较低的数字也是如此。即，如果用户选择2然后将其更改为1，则numberOfRooms变为3而不是以1相同的方式增加成本而不是降低成本。

有没有一种方法可以让我知道某个特定的选择值是否已减少？这是来自的选项选择roomNo结构

$(document).ready(function() {
  $(".quantity").on('change', function() {
    var roomNo = $(this).children('option:selected').val();
    var cost = $(this).parent().parent().find('.charge p').text();
    var totalRoomCost = roomNo * cost;
    var oldRoomNo = $('.room_no').val();
    var numberOfRooms = parseInt(oldRoomNo) + parseInt(roomNo);
    var oldCost = $('.total_cost').val();
    var final_cost = parseInt(oldCost) + totalRoomCost;
    //alert(totalCost);
    $('.room_no').val(numberOfRooms);
    $('.total_cost').val(final_cost);
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><u class="text-success"><b>Delux Single</b></u><br><small></small></td>
    <td> <i class="fa fa-user" aria-hidden="true"></i></td>
    <td colspan="3">
      <table>
        <tbody>
          <tr>
            <td class="charge">
              <p>1600</p>
            </td>
            <td class="text-success">Bed Only</td>
            <td>
              <select name="quantity" class="quantity" required="">
                <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="charge">
              <p>1800</p>
            </td>
            <td class="text-success">Bed and breakfast</td>
            <td>
              <select name="quantity" class="quantity" required="">
                <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="charge">
              <p>2000</p>
            </td>
            <td class="text-success">Half Board</td>
            <td>
              <select name="quantity" class="quantity" required="">
                <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="charge">
              <p>2200</p>
            </td>
            <td class="text-success">Full Board</td>
            <td>
              <select name="quantity" class="quantity" required="">
                <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td><a href="">Reserve</a></td>
  </tr>
</table>
 <div class="col-2">
       <div class='form-group'>
            <input type='text' name ='quantity' class='form-control room_no' readonly='readonly' value="0"/>
              </div>
              <div class='form-group'>
                    <input type='text' name ='total_cost' class='form-control total_cost' readonly='readonly' value="0"/>
               </div>
               <input type='submit' value='Reserve'/>
                </div>

标签： jquerylaravel-8

解决方案

您可以使用.each循环遍历您的选择框并获取费用值和房间计算它们，最后在所需的输入中添加结果。

演示代码：

$(document).ready(function() {
  $(".quantity").on('change', function() {
    var totalRoomCost = 0
    var numberOfRooms = 0
    //loop through each select
    $(".quantity").each(function() {
      var roomNo = $(this).val() != "" ? parseInt($(this).val()) : 0;
      var cost = parseInt($(this).closest("tr").find('.charge p').text());
      totalRoomCost += roomNo * cost;
      numberOfRooms += roomNo
    })

    $('.room_no').val(numberOfRooms);
    $('.total_cost').val(totalRoomCost);
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><u class="text-success"><b>Delux Single</b></u><br><small></small></td>
    <td> <i class="fa fa-user" aria-hidden="true"></i></td>
    <td colspan="3">
      <table>
        <tbody>
          <tr>
            <td class="charge">
              <p>1600</p>
            </td>
            <td class="text-success">Bed Only</td>
            <td>
              <select name="quantity" class="quantity" required="">
                <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="charge">
              <p>1800</p>
            </td>
            <td class="text-success">Bed and breakfast</td>
            <td>
              <select name="quantity" class="quantity" required="">
                <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="charge">
              <p>2000</p>
            </td>
            <td class="text-success">Half Board</td>
            <td>
              <select name="quantity" class="quantity" required="">
                <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="charge">
              <p>2200</p>
            </td>
            <td class="text-success">Full Board</td>
            <td>
              <select name="quantity" class="quantity" required="">
                <option value="">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td><a href="">Reserve</a></td>
  </tr>
</table>
<div class="col-2">
  <div class='form-group'>
    <input type='text' name='quantity' class='form-control room_no' readonly='readonly' value="0" />
  </div>
  <div class='form-group'>
    <input type='text' name='total_cost' class='form-control total_cost' readonly='readonly' value="0" />
  </div>
  <input type='submit' value='Reserve' />
</div>

推荐阅读