Question

我已设法启动并运行此代码，简而言之，根据它的大小计算清洁房屋的总价格。现在我想添加第二个选项：选择所需的时间，但我不确定如何继续并连接两个不同的表单元素。

这就是我的代码现在的样子：

$(document).ready(function(){

    $("#order").on('input', function(){
        var kvm2 = parseInt($('#kvm2').val()) || 0;
        var min_price = 299;
        var kvm2_price;
        if(kvm2 > 100) {
            kvm2_price = 6;
        }
        if(kvm2 > 200) {
            kvm2_price = 4;
        }       
        if(kvm2 <= 100) {
            kvm2_price = 7;
        }
        var total = (kvm2_price * kvm2).toFixed(2);
        if(total < min_price) {
            $('#total').html(min_price);
        }
        else {
            $('#total').html(total);
        }
    }); 
});

这是我要添加的选择框：

 <select name="timeslot" class="form-control form-control-lg">
    <option value="1">Dagtid (08 - 15) 0kr</option>
    <option value="2">Formiddag (12 - 15) 39kr</option>
    <option value="3">Ettermiddag (16 - 18) 39kr</option>
    <option value="4">Kveld (19 - 24) 129kr</option>
  </select>

根据您选择的选项，应在总销售价格之上添加0kr，39kr或129kr。

Answer 1

将total声明为全局，然后在第二个函数中添加它，并更新元素中的值。为简单起见，下面的代码只给出了一个初始值，就好像你的第一个函数已经运行一样。然后，选择一个时间段，并添加额外费用并显示在total元素中。注意 - 您需要将总变量保留为第一个函数的输出，否则如果用户多次更改时间选项，则总数将保持增加。

＆＃13;

var total = 100;
  /*$("#order").on('input', function() {
    var kvm2 = parseInt($('#kvm2').val()) || 0;
    var min_price = 299;
    var kvm2_price;
    if (kvm2 > 100) {
      kvm2_price = 6;
    }
    if (kvm2 > 200) {
      kvm2_price = 4;
    }
    if (kvm2 <= 100) {
      kvm2_price = 7;
    }
    total = (kvm2_price * kvm2).toFixed(2);
    if (total < min_price) {
      $('#total').html(min_price);
    } else {
      $('#total').html(total);
    }
  });*/


  $('#timeslot').on('change', function() {
    extra = $(this).val();
    switch (extra) {
      case '1':
        add = 0;
        break;
      case '2':
      case '3':
        add = 39;
        break;
      case '4':
        add = 129;
        break;
    }
    total2 = total + add;
    console.log(total2);
    $('#total').html(total2);
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="timeslot" class="form-control form-control-lg">
    <option disabled selected>Select Time</option>
    <option value="1">Dagtid (08 - 15) 0kr</option>
    <option value="2">Formiddag (12 - 15) 39kr</option>
    <option value="3">Ettermiddag (16 - 18) 39kr</option>
    <option value="4">Kveld (19 - 24) 129kr</option>
  </select>
<br>
<div id="total">100</div>

＆＃13;

Answer 2

您可以使用jsfiddle https://jsfiddle.net/5orednbn/

**HTML**
<div id="subTotal">SubTotal: <span>200</span></div>
<select name="timeslot" class="form-control form-control-lg">
    <option value="0">Dagtid (08 - 15) 0kr</option>
    <option value="39">Formiddag (12 - 15) 39kr</option>
    <option value="39">Ettermiddag (16 - 18) 39kr</option>
    <option value="129">Kveld (19 - 24) 129kr</option>
</select>

<button type="button" id="order" value="submit" >Submit</button>

<div id="grandTotal">Total: <span></span></div>


**JS**
$("#order").on('click', function(){
    var subtotal = parseFloat($('#subTotal > span').text());
    var timeSlot = parseFloat($('select[name="timeslot"] option:selected').val());

    $('#grandTotal > span').html( subtotal + timeSlot);
});

从选择框中获取值并使用jQuery添加到total

2 个答案: