Question

我有一个简单的函数，它应该在HTML表格中显示两组数据。此数据来自使用ajax请求的外部域。这两组数据都已经过解析，并存储在两个变量中，分别名为animalData和fruitNvegData。

我有两个运行buildTable()功能的按钮。我需要让每个按钮将相关数据传递给函数。我知道如何在JavaScript中执行此操作，但这种方式不适用于jQuery。我已经阅读了许多将参数/参数传递给函数的示例，但这些方法都不适用于我。我尝试过这种事情的一些变化，但没有快乐：

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

现在我在animalData循环中使用each()来确保其他所有内容都正常工作。我在StackOverflow上发现了许多类似的问题，但这些问题都没有。就像使用bind()一样。

这是我的整个jquery代码。那么如何通过点击每个按钮将相关数据传递给函数？

  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

您遇到的问题是访问您的两个变量，同时保持代码简单。最简单的方法是将两个变量animalData和fruitNvegData合并到一个对象中。

然后，您可以通过此父对象的键引用这些变量，您可以将其作为data属性添加到各自的按钮中。然后，这允许您向这些按钮添加公共类，并为两者使用单个事件处理程序，如下所示：

<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

如何通过按钮点击将参数/参数传递给函数？

1 个答案: