jQuery Skripte Kombination, um es kleinere

Question

Ich habe einen jQuery-Skript geschrieben, die gleiche Aufgabe tut, sondern auf verschiedene Ereignisse sagen

1. Auf Seite Last
2. Bei Änderung der Drop-Down-Auswahl
3. Bei Klick auf Swap-Taste
4. auf keyup in einem Textfeld

Aber ich hatte die Skripte für alle von ihnen getrennt zu schreiben. Ich bin neu bei jQuery. Ich möchte die Scripts kombinieren, um sie gleichzeitig zu verwenden, sie aber kleiner zu machen. Ist es möglich?

Script

<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

Es ist mehr wie eine allgemeine Frage, aber hier ist es. Sie können Ihren Code wiederverwenden! Setzen Sie Ihren Code einfach in eine Funktion wie diese.

function hello(){ console.log('hi!')} 

Und dann können Sie es an eine andere Funktion übergeben

anotherFunction(hello) 

Oder einfach es nennen

hello() 

In Ihrem Beispiel können Sie tun, wie diese

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

Answer 2

Sie könnten den Code in Funktionen teilen und eine separate Datei (filename.js) schaffen es in Ihren HTML aufzunehmen.

Answer 3

Sie könnten die gleiche Funktion für jeden Handler wiederverwenden, da Sie den gleichen Code in jedem von ihnen zu haben scheinen:

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