Question

我有以下两个滑块功能，效果很好，显示如下： alt text http://mpasqualone.com/sliders.png

我将diskAmount和transferAmount存储在全局变量中，但是我现在要弄清楚的是如何获得最初显示为月费的两者之和，然后在两个滑块中的任何一个时更新改变。

因此，在上面的屏幕截图中，初始状态为24.75美元，如果滑块发生变化，费用将会更新。

有人能指出我正确的方向吗？我得到可以显示的初始费用，但无法弄清楚如何在jQuery中调用另一个函数的1函数。

$(function() {
        $("#disk").slider({
            value:3,
            min: 1,
            max: 80,
            step: 1,
            slide: function(event, ui) {
                $("#diskamount").val(ui.value + ' Gb');
                $("#diskamountUnit").val('$' + parseFloat(ui.value * diskCost).toFixed(2));
            }
        });
        // Set initial diskamount state
        $("#diskamount").val($("#disk").slider("value") + ' Gb');
        // Set initial diskamountUnit state
        diskAmount = $("#disk").slider("value") * diskCost;
        $("#diskamountUnit").val('$' + diskAmount.toFixed(2));

    });

    $(function() {
        $("#data").slider({
            value:25,
            min: 1,
            max: 200,
            step: 1,
            slide: function(event, ui) {
                $("#dataamount").val(ui.value + ' Gb');
                $("#dataamountUnit").val('$' + parseFloat(ui.value * transferCost).toFixed(2));
            }
        });
        // Set initial dataamount state
        $("#dataamount").val($("#data").slider("value") + ' Gb');
        // Set initial dataamountUnit state
        transferAmount = $("#data").slider("value") * transferCost;
        $("#dataamountUnit").val('$' + transferAmount.toFixed(2));      
    });

Answer 1

两个幻灯片处理程序都需要调用（或者如果你想要冗余就执行内联）一个函数来将这两个值加在一起。

我会将实际值（在您添加GB或$之前）保存到元素本身，例如

$("#dataamount").val(ui.value + 'Gb').data('value', ui.value);

您可以通过添加功能

访问它

function updateTotal() {
  var total = $("#diskamount").data('value') +  $("#dataamount").data('value');
  $('#total').val( "$" + parseFloat(total * diskCost).toFixed(2));
}

也许不是正确的ID，但我想你会明白这个想法......

Answer 2

function updateTotal($0,$1){
   $('#monthly').text('$' + ($0+$1).toFixed(2))
}

然后在每个slide中调用它，就像这样，

代表$("#disk")

slide: function(event, ui) {
       $("#dataamount").val(ui.value + ' Gb');
       $("#dataamountUnit").val('$' + parseFloat(ui.value * transferCost).toFixed(2));
       updateTotal(parseFloat(ui.value * transferCost), $("#data").slider("value") * transferCost)
}

代表$("#data")

slide: function(event, ui) {
       $("#dataamount").val(ui.value + ' Gb');
       $("#dataamountUnit").val('$' + parseFloat(ui.value * transferCost).toFixed(2));
       updateTotal(parseFloat(ui.value * transferCost), $("#disk").slider("value") * transferCost)
}

Answer 3

这就是我所做的;基于雷格尔的建议：

for：$（“＃data”）

slide: function(event, ui) {
    $("#dataamount").val(ui.value + ' Gb');
    transferAmount = parseFloat(ui.value * transferCost);
    $("#dataamountUnit").val('$' + parseFloat(transferAmount).toFixed(2));
    updateTotals(transferAmount,diskAmount);
}

这样我就不需要通过我的其余代码进行计算，只要我需要就可以调用var transferAmount。谢谢Dan＆amp; Reigel。

function updateTotals($0,$1) {
    $('#totalMonthlyFee').val(($0+$1).toFixed(2));
}

更改jQuery触发器功能

3 个答案: