jQuery范圍增加變數

我很難做到這一點：

• 我有作業持續時間（范圍滑塊）
• 4個變數：
  • 第一個小時 - ￡30
  • 30 分鐘 - 15 英鎊
  • 每隔一小時 - 20 英鎊
  • 30 分鐘 - 10 英鎊

我已經嘗試過使用陣列和每小時的正確價格（最多 8 小時），但是如果我更改某些價格，我必須更改（重新計算）所有陣列。那么我怎樣才能做到這一點：

• 如果滑塊 val 為 0 - ￡30（1 小時）
• 如果滑塊 val 為 1 - 45 美元（1 小時 30 分鐘）
• 如果滑塊 val 為 2 - 50 英鎊（2 小時）
• 如果滑塊 val 為 3 - 60 英鎊（2 小時 30 分鐘）
• 等等。

var duration_array = ['1 Hour 00 Minutes', 
                        '1 Hour 30 Minutes',
                        '2 Hours 00 Minutes',
                        '2 Hours 30 Minutes',
                        '3 Hours 00 Minutes',
                        '3 Hours 30 Minutes',
                        '4 Hours 00 Minutes',
                        '4 Hours 30 Minutes',
                        '5 Hours 00 Minutes',
                        '5 Hours 30 Minutes',
                        '6 Hours 00 Minutes',
                        '6 Hours 30 Minutes',
                        '7 Hours 00 Minutes',
                        '7 Hours 30 Minutes',
                        '8 Hours 00 Minutes'
                        ];

$(document).on('input', '#duration_slider', function() {
    var value = $(this).val();
    $('#duration_output').html(duration_array[value]);

    var a = 51;
    var b = 25.50;
    var c = 39;
    var d = 19.50;
});

uj5u.com熱心網友回復：

據我了解，您有 2 條定價規則：

• 當時間少于2小時時，它只是hours * ￡30;
• 當時間為 2 小時時，為第一小時的費用，加上extra hours * ￡20;

檢查檔案的范圍輸入，我們也可以使用step屬性。由于您的價格以半小時為增量上漲，因此我們可以使用 的step值0.5來準確獲取您需要收費的小時數。

所以把所有這些放在一起：

$(document).on('input', '#duration_slider', function() {
    // Use parseFloat to make sure hours is a number so we can do math with it
    var hours = parseFloat($(this).val());
    var cost = 0;
    
    $('#hours').html(hours);
    
    if (hours < 2) {
        cost = hours * 30;
    } else {
        // Cost of first hour is 30; calculate the remaining cost 
        // and add it to the first hour cost.
        hours = hours - 1;
        cost = (hours * 20)   30;
    }

    $('#duration_output').html(cost);
});

input {
    width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" value="1" min="1" max="8" step="0.5" class="slider" id="duration_slider">

<div>
    <p>Hours: <span id="hours">1</span></p>
    <p>Cost: ￡<span id="duration_output">30</span></p>
</div>

uj5u.com熱心網友回復：

看起來您只需要查看滑塊的索引號并將其轉換為您的最終價格：

var duration_array = [
    '1 Hour 00 Minutes', 
    '1 Hour 30 Minutes',
    '2 Hours 00 Minutes',
    '2 Hours 30 Minutes',
    '3 Hours 00 Minutes',
    '3 Hours 30 Minutes',
    '4 Hours 00 Minutes',
    '4 Hours 30 Minutes',
    '5 Hours 00 Minutes',
    '5 Hours 30 Minutes',
    '6 Hours 00 Minutes',
    '6 Hours 30 Minutes',
    '7 Hours 00 Minutes',
    '7 Hours 30 Minutes',
    '8 Hours 00 Minutes'
];

$(document).on('input', '#duration_slider', function() {
    var value = parseInt( $(this).val() );
    $('#duration_output').html(duration_array[value]);

    let price;
    switch ( value ) {
        case 0:
            price = 30;
            break;
        case 1:
            price = 45;
            break;
        default:
            price = (value * 25) - 15 * (value - 2)
            break;
    }
    
    $('#price_output').html(price);
});

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

<input type="range" min="0" max="14" id="duration_slider">
<br>
<div id="duration_output"></div>
$<span id="price_output"></span>

標籤：jQuery

上一篇：單擊按鈕時模式未打開

下一篇：如何使用jquery獲取多個類的輸入欄位的值