javascript - 结合 jQuery 脚本使其更小

标签 javascript jquery

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

最佳答案

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

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/

相关文章:

javascript - 全日历选项不起作用

jquery - 以百分比分配宽度,但想以像素为单位获取它

ajax - 循环内的 jQuery.ajax()

javascript - 如何通过 onclick 事件检查输入是否仅包含大小写字母、数字和破折号?

javascript - 动态加载脚本会改变其行为

javascript - 如何使用 API 在 Monaco Editor 中格式化 JSON 代码?

javascript - 在页面加载时显示固定列,当用户单击符号时显示 html 表中的剩余列

javascript - 在 D3 中应用包装功能后,文本刷新到初始状态

javascript - toLocaleDateString() 不返回 dd/mm/yyyy 格式

jQuery 将 padding-top 计算为 px 中的整数