我编写了一个 jQuery 脚本,它执行相同的任务,但在不同的事件上说
- 页面加载时
- 更改下拉选项
- 点击交换按钮
- 在文本字段中键入时
但我必须单独为它们编写脚本。我是 jQuery 新手。我想将这些脚本组合起来以使其工作相同,但使其更小。可能吗?
脚本
<script type="text/javascript">
// Fire this function when page loads
$(document).ready(function () {
$.getJSON(
'https://openexchangerates.org/api/latest.json?app_id=2e946db1e3fc4888b61330e505a804e5',
function(data){
if(typeof fx !== "undefined" && fx.rates){
fx.rates = data.rates;
fx.base = data.base;
var amount = $("#amt").val();
var from = $("#from").val();
var to = $("#to").val();
$("#res").val( fx(amount).from(from).to(to));
$("#result").show();
}
}
);
});
// Fire this function when value is entered in the field
$(document).keyup('#amt', function(){
$.getJSON(
'https://openexchangerates.org/api/latest.json?app_id=2e946db1e3fc4888b61330e505a804e5',
function(data){
if(typeof fx !== "undefined" && fx.rates){
fx.rates = data.rates;
fx.base = data.base;
var amount = $("#amt").val();
var from = $("#from").val();
var to = $("#to").val();
$("#res").val( fx(amount).from(from).to(to));
$("#result").show();
}
}
);
});
// Fire this function on swap button click
$("#swap").click(function(e) {
e.preventDefault();
var fromVal = $("#from option:selected").val();
var fromText = $("#from option:selected").text();
var toVal = $("#to option:selected").val();
var toText = $("#to option:selected").text();
$("#from option:selected").val(toVal);
$("#from option:selected").text(toText);
$("#to option:selected").val(fromVal);
$("#to option:selected").text(fromText);
$.getJSON(
'https://openexchangerates.org/api/latest.json?app_id=2e946db1e3fc4888b61330e505a804e5',
function(data){
if(typeof fx !== "undefined" && fx.rates){
fx.rates = data.rates;
fx.base = data.base;
var amount = $("#amt").val();
var from = $("#from").val();
var to = $("#to").val();
$("#res").val( fx(amount).from(from).to(to));
$("#result").show();
}
}
);
});
// Fire this function on change of "FROM" dropdown selection
$("#from").change(function () {
$.getJSON(
'https://openexchangerates.org/api/latest.json?app_id=2e946db1e3fc4888b61330e505a804e5',
function(data){
if(typeof fx !== "undefined" && fx.rates){
fx.rates = data.rates;
fx.base = data.base;
var amount = $("#amt").val();
var from = $("#from").val();
var to = $("#to").val();
$("#res").val( fx(amount).from(from).to(to));
$("#result").show();
}
}
);
});
// Fire this function on change of "TO" dropdown selection
$("#to").change(function () {
$.getJSON(
'https://openexchangerates.org/api/latest.json?app_id=2e946db1e3fc4888b61330e505a804e5',
function(data){
if(typeof fx !== "undefined" && fx.rates){
fx.rates = data.rates;
fx.base = data.base;
var amount = $("#amt").val();
var from = $("#from").val();
var to = $("#to").val();
$("#res").val( fx(amount).from(from).to(to));
$("#result").show();
}
}
);
});
</script>
最佳答案
这更像是一个一般性问题,但就是这样。您可以重复使用您的代码!只需将您的代码放入这样的函数中即可。
function hello(){ console.log('hi!')}
然后你可以将它传递给另一个函数
anotherFunction(hello)
或者简单地调用它
hello()
在您的示例中,您可以这样做
function someFunction() {
$.getJSON(
'https://openexchangerates.org/api/latest.json?app_id=2e946db1e3fc4888b61330e505a804e5',
function (data) {
if (typeof fx !== "undefined" && fx.rates) {
fx.rates = data.rates;
fx.base = data.base;
var amount = $("#amt").val();
var from = $("#from").val();
var to = $("#to").val();
$("#res").val(fx(amount).from(from).to(to));
$("#result").show();
}
}
);
}
function passItToSwap(e) {
e.preventDefault();
var fromVal = $("#from option:selected").val();
var fromText = $("#from option:selected").text();
var toVal = $("#to option:selected").val();
var toText = $("#to option:selected").text();
$("#from option:selected").val(toVal);
$("#from option:selected").text(toText);
$("#to option:selected").val(fromVal);
$("#to option:selected").text(fromText);
someFunction();
}
$(document).ready(someFunction);
$(document).keyup('#amt', someFunction);
$("#swap").click(passItToSwap);
等等
关于javascript - 结合 jQuery 脚本使其更小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42786381/