Wie übergebe ich Argumente/Parameter mit Tastenklicks in Funktionen?

Question

Ich habe eine einfache Funktion, die zwei Datensätze in einer HTML-Tabelle anzeigen soll. Diese Daten stammen von einer externen Domäne, die eine Ajax-Anforderung verwendet. Beide Datensätze wurden analysiert und in zwei Variablen namens animalData und fruitNvegData gespeichert.

Ich habe zwei Tasten, die die buildTable() Funktion ausführen. Ich muss jeden Knopf die relevanten Daten in die Funktion übergeben lassen. Ich weiß, wie man das in JavaScript macht, aber das funktioniert nicht mit jQuery. Ich habe viele Beispiele für das Übergeben von Argumenten/Parametern in eine Funktion gelesen, aber keine der Methoden funktioniert für mich. Ich habe ein paar Variationen dieser Art der Sache versucht, aber keine Freude:

$("animalButton").click({ param: animalData }, buildTable); 

Vorerst ich animalData in der each() Schleife bin mit sicher, alles andere funktioniert zu machen. Ich habe hier auf StackOverflow viele ähnliche Fragen gefunden, aber keine davon funktioniert. Wie zum Beispiel mit bind().

Dies ist mein gesamter JQuery-Code. Wie gebe ich die relevanten Daten bei jedem Klick in die Funktion weiter?

var animalData; 
    var fruitNvegData; 

    $(document).ready(function() { 

      $.ajax({ 
        dataType: 'json', 
        url: "http://www.adweb.agency/interview/api/animals", 
        type: 'get', 
        success: function (data) { 

          animalData = $.parseJSON(data); 

         }, 

         error: function(XMLHttpRequest, textStatus, errorThrown) { 
         alert("animal data unavailable at this time"); 
         } 
       }); 

      $.ajax({ 
        dataType: 'json', 
        url: "http://www.adweb.agency/interview/api/fruitveg", 
        type: 'get', 
        success: function (data) { 

          fruitNvegData = $.parseJSON(data); 

         }, 

         error: function(XMLHttpRequest, textStatus, errorThrown) { 
         alert("Fruit n Veg data unavailable at this time"); 
         } 
       }); 
     }); 


function buildTable(){  

         var i = 0; 
         var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>'; 

           $.each(animalData, function (idx, obj) {         
             table += ('<tr>'); 
             table += ('<td>' + obj.Title + '</td>'); 
             table += ('<td><img src="' + obj.ImageURLs.Thumb + '"></td>'); 
             table += ('<td>' + obj.Description + '</td>'); 
             table += ('</tr>'); 
            }); 

        table += '</table>'; 
        $("#tableContainer").html(table); 
    }; 


    $("#animalButton").click(buildTable); 

    $("#fruitNvegButton").click(buildTable); 

Answer 1

Das Problem, das Sie haben, ist Zugriff auf Ihre zwei Variablen, während Sie den Code einfach halten. Der einfachste Weg dazu besteht darin, Ihre beiden Variablen animalData und fruitNvegData zu einem einzigen Objekt zusammenzufügen.

Sie können diese Variablen dann über die Schlüssel dieses übergeordneten Objekts referenzieren, die Sie ihren jeweiligen Schaltflächen als data Attribute hinzufügen können. Dieses System erlaubt es, eine gemeinsame Klasse auf diese Schaltflächen hinzufügen und einen einzigen Event-Handler für beide, so etwas wie folgt verwenden:.

<div id="tableContainer"></div> 

<button class="buildTable" data-key="animal">Populate animal table</button> 
<button class="buildTable" data-key="fruitnveg">Populate animal table</button> 

var data = { 
    'animal': animalData, 
    'fruitnveg': fruitNvegData 
} 

function buildTable() { 
    var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>'; 
    $.each(data[$(this).data('key')], function(idx, obj) { 
     table += '<tr>'; 
     table += '<td>' + obj.Title + '</td>'; 
     table += '<td><img src="' + obj.ImageURLs.Thumb + '"></td>'; 
     table += '<td>' + obj.Description + '</td>'; 
     table += '</tr>'; 
    }); 
    table += '</table>'; 
    $("#tableContainer").html(table); 
}; 

$(".buildTable").click(buildTable); 

Working example