Javascript 结合jQuery脚本使其更小

我已经编写了一个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>

---

您可以将代码划分为函数，并创建一个单独的文件filename.js以将其包含在HTML中。

您可以对每个处理程序重复使用相同的函数，因为每个处理程序中似乎都有相同的代码：

var fx = {
        'base' : null,
        'rates' : true
    },
    getRates = function() {
        $.getJSON( 'https://openexchangerates.org/api/latest.json?app_id=2e946db1e3fc4888b61330e505a804e5', function(data) {
            var amount,
                from,
                to;
            if (typeof fx !== "undefined" && fx.rates) {
                fx.rates = data.rates;
                fx.base = data.base;
                amount = $("#amt").val();
                from = $("#from").val();
                to = $("#to").val();
                $("#res").val( fx(amount).from(from).to(to));
                $("#result").show();
            }
        });
    };
// Fire this function when page loads
$(document).ready(getRates);
// Fire this function when value is entered in the field
$(document).keyup('#amt', getRates);
// Fire this function on swap button click
$("#swap").click(function(e) {
    e.preventDefault();
    var fromVal = $("#from option:selected").val(),
        fromText = $("#from option:selected").text(),
        toVal = $("#to option:selected").val(),
        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);
    getRates();
});
// Fire this function on change of "FROM" and of "TO" dropdown selection
$("#from, #to").change(getRates);

---

这更像是一个一般性的问题，但在这里。你可以重用你的代码！只需将代码放入这样的函数中

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);

---

etc

您不希望API密钥公开可见。我建议您将它们从问题中删除。此外，from和to可以包装在同一个选择器中$从，我不是说你的代码有任何错误，但形式是不工作。。。你能再看一下吗？你的代码没有显示“fx”是在哪里定义的，所以我不得不猜测。添加创建变量“fx”的部分，以便我们知道如何处理它。否则，只需编辑自己的代码以匹配类似的结构，也就是使用变量来保存要重用的函数。伟大的我学到了一些完美的东西。。你能更新你的答案吗？我如何调用交换函数？我做了$swap.clicksomeFunction；但它不起作用，只需将传递给“swap”函数的函数内容放入另一个函数中，给它一个名称，然后简单地按名称传递给swap函数即可。试试看，很简单。