在单独的滑块中使用jQuery UI Slider值

时间:2014-07-08 17:24:31

标签: javascript jquery jquery-ui

我已经整理了一个费率计算器,因此乐队可以计算每个排练费用(总小时/乐队成员的价格=每个乐队成员的费用)并且我已经让它工作到了点。移动#members的滑块时,需要根据#hours值根据getCost的值重新计算。我知道它设置如下只显示每个成员的价格基于#hours的值而不是getCost的值,但我做的任何其他事情都打破了#hours滑块。如何根据getCost值重新计算?

http://jsfiddle.net/4YYWd/6/

$(function() {
    $( "#hours" ).slider({
        range: "min",
        value:1,
        min: 1,
        max: 7,
        slide: function(event, ui) {
            $("#paraOne").text(getCost(ui.value));
            $('#paraTotal').text('£' + (getCost(ui.value) / ($('#members').slider("value")).toFixed(2)));
            $('#prhours').text(ui.value);
        }
    });

    $("#members").slider({
        range: "min",
        value: 1,
        min: 1,
        max: 6,
        slide: function(event, ui) {
            $("#paraTwo").text(ui.value);
            $('#paraTotal').text('£' + (($('#hours').slider("value") / ui.value).toFixed(2)));
        }
    });
});


function getCost(nRate){
    var costToReturn;

    switch(nRate){
        case 1:
            costToReturn = 10;
            break;
        case 2:
            costToReturn = 20;
            break;
        case 3:
            costToReturn = 28;
            break;
        case 4:
            costToReturn = 36;
            break;
        case 5:
            costToReturn = 44;
            break;
        case 6:
            costToReturn = 52;
            break;
        case 7:
            costToReturn = 60;
            break;
    }

    return costToReturn;
}

1 个答案:

答案 0 :(得分:1)

稍微修改一下代码就可以了:

(...)
$('#paraTotal').text('£' + (getCost($('#hours').slider("value")) / ui.value).toFixed(2));
(...)

请参阅updated jsfiddle