javascript - 结合 jQuery 脚本使其更小

Question

我编写了一个 jQuery 脚本，它执行相同的任务，但在不同的事件上说

1. 页面加载时
2. 更改下拉选项
3. 点击交换按钮
4. 在文本字段中键入时

但我必须单独为它们编写脚本。我是 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>

Answer 1

这更像是一个一般性问题，但就是这样。您可以重复使用您的代码!只需将您的代码放入这样的函数中即可。

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

等等