我使用jQuery UI创建了两个数字滑块,将计算结果输出到#total
。
根据#total
中生成的值,我尝试使用money.js openexchangerates.com的api生成两次货币转换。这些内容附加到ul.currencies
。
页面加载时,交换值输出正常。但是,当使用滑块更改#total
的值时,更改不会反映在生成的两个交换值中。
如果ul.currencies
中的值更新时,如何在#total
中启用交换值进行更新?
这是我的计算代码:
$("#total").val("0");
$("#amount").val("Amount A");
$("#amountb").val("Amount B");
$( function() {
var p = {
0: "zero",
1: "one hundred",
};
var t = {
0: "0",
1: "100",
}
var b = {
0: "zero",
1: "one hundred",
};
var d = {
0: "0",
1: "100",
}
$("#slider").slider({
value: "0",
min: 0,
max: 1,
step: 1,
slide: function(event, ui) {
$("#price").val(t[ui.value]);
$("#amount").val(p[ui.value]);
var aaa = $("#price").val();
var bbb = $("#priceb").val();
$("#total").val(+1500 + +aaa + +bbb);
}
});
$("#sliderb").slider({
value: "0",
min: 0,
max: 1,
step: 1,
slide: function(event, ui) {
$("#priceb").val(d[ui.value]);
$("#amountb").val(b[ui.value]);
var aaa = $("#price").val();
var bbb = $("#priceb").val();
$("#total").val(+1500 + +aaa + +bbb);
}
});
$("#price").val('$' + $("#slider").slider("value"));
$("#priceb").val('$' + $("#slider").slider("value"));
// individual base values
$("#price").val("0");
$("#priceb").val("0");
这是我的汇率代码:
fx.base = "GBP";
fx.settings = {from : "GBP"};
var amount = $("#total").val();
$.getJSON(
'http://openexchangerates.org//api/latest.json?app_id=my_key',
function(data) {
// Check money.js has finished loading:
if ( typeof fx !== "undefined" && fx.rates ) {
fx.rates = data.rates;
fx.base = data.base;
} else {
// If not, apply to fxSetup global:
var fxSetup = {
rates : data.rates,
base : data.base
}
}
// now that we have exchange rates, add a few to our page
var USD = fx.convert(amount, {to: "USD"}); //13.22784197768393
var EUR = fx.convert(amount, {to: "EUR"}); //8.567532636985659
var JPY = fx.convert(amount, {to: "JPY"}); //1028.1670562349989
$("ul.currencies").append("<li>Base value" + amount + "</li>");
$("ul.currencies").append("<li>EUR estimate: " + EUR + "</li>");
$("ul.currencies").append("<li>JPY estimate: " + JPY + "</li>");
}
);