fonction de déclenchement jQuery sur le changement

Question

j'ai les deux fonctions de curseur qui fonctionnent bien et affichent comme suit si: alt text http://mpasqualone.com/sliders.png

Je diskAmount et transferAmount stockées dans vars globales, mais ce que je suis en train maintenant de comprendre comment Est-ce que je reçois la somme des deux pour montrer initialement que les honoraires mensuels, et puis mettent à jour quand l'un des deux curseurs sont changés. Donc, dans ma capture d'écran ci-dessus, l'état initial sera de 24,75 $, et les frais seront mis à jour si les glisseurs changent.

Quelqu'un peut-il me diriger dans la bonne direction? Je peux obtenir les frais initiaux pour montrer, mais je ne peux pas comprendre comment obtenir une fonction pour appeler une autre fonction dans jQuery.

$(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

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

puis l'appeler dans chaque slide comme si,

pour $("#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) 
} 

pour $("#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 2

Les deux gestionnaires de diapositives doivent appeler (ou exécuter en ligne si vous voulez être redondant) une fonction d'ajouter les deux valeurs.

je sauverais la valeur réelle (avant d'ajouter Go ou $) à l'élément lui-même, comme

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

cette façon, vous pouvez y accéder dans votre fonction d'addition

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

peut-être pas le droit de son identité, mais je pense que vous aurez l'idée ...

Answer 3

Voici ce que je l'ai fait; base fortement avec ce Reigel suggéré:

pour: $ (« # data »)

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

De cette façon, je ne ai pas besoin de faire des calculs à travers le reste de mon code et peut simplement appeler var transferAmount chaque fois J'ai besoin de. Merci Dan & Reigel.

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