Hi i have a question a tryaing to create Amount calculator in jQuery, AJAX and jQuery UI. But i have a problem, i get all importat values from slider, select box. Bud i really don't know how can a get this value to global. I get value only in each function but when i want get this value out of function this value in variable does not exist.
$(function() {
//1st slider for get amount
$("#amount").slider({
range: "min",
value: 0,
min: 0,
max: 10000,
slide: function (e, ui) {
$("#amount_show").val(ui.value);
amount = ui.value;
}
});
$("#amount_show").val($("#amount").slider("value"));
//2nd slider for get values years
$("#years").slider({
range: "min",
value:1,
min:1,
max:20,
step:1,
slide: function (e, ui) {
$("#years_show").val(ui.value);
years = ui.value;
}
});
$("#years_show").val($("#years").slider("value"));
//AJAX for loading values 开发者_开发技巧from xml
$.get("irate.xml", function(xml) {
$(xml).find('country').each(function() {
var select = $('#country'),
id = $(this).attr('id'),
name = $(this).find('name').text(),
irate = $(this).find('irate').text(),
currency = $(this).find('currency').text();
select.append("<option value='"+irate+"'>"+name+"</option>");
});
});
//get irate value from dropbox
$("#country").change(function() {
var irate_select = "";
$("#country option:selected").each(function () {
irate_select += $(this).val() + " ";
});
irate = irate_select;
});
});
I need calculate with amount, years and irate.
Thank for your advice.
declare the variable outside of your function.
ex.
var amount;
$(function...
AndyL's answer should be correct.
If you declare the variables you need available in another function outside of your function, and then set their values in one function, they should be available with those values to another function.
// outside your function!!
var amount,
years,
irate;
// in your function somewhere!!
amount = someCalculation();
years = someOtherCalculation();
These values will be available in every other function because they are declared as members of the global namespace.
Try using jquery's data() object;
$(function(){
...
slide: function (e, ui) {
$("#amount_show").val(ui.value);
amount = ui.value;
// Add to data() object here
$('#amount').data('amount',amount);
}
// reference it elsewhere in your script like such:
console.log($('#amount').data('amount'));
a global variable should work, however, Shouldn't you want to change your 'calculator' if they change the values of something?
pretend this is the html for the calculated amount:
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
then you will need something like this code in document.ready():
//if the slider changes, then update the calculated value
$( "#years,#amount" ).bind( "slidechange", function(event, ui) {
myCalculator();
});
// if the ?country? drop down changes, update the calculated value
$().change(function(event){
myCalculator();
});
function myCalculator(){
var years = $('#years').slider("value");
var amount = $('#amount').slider("value");
var country = $('#country').val();
$('#amount').val("something")
};
精彩评论