Javascript 在单击按钮时附加JSON值

我想我遗漏了什么。 这个Jquery移动web应用程序用于查看特定城市中的停车场信息

基本上，应用程序正在加载、解析JSON数据，然后将其附加到页面上。然后是一个文本框输入和一个按钮。基于文本框输入，它仅显示与文本框输入中指定的停车位数量相同的停车位数据。基本上根据用户指定的停车位数量查看停车场信息。 我有一些工作，但方法，附加数据不工作的按钮点击。只有在本地浏览器上刷新页面时，才会加载与文本框对应的值。我不想这样做，希望在单击按钮时更新列表

JSON的一部分parkingLots.JSON

 {
   "lotList":[
      {
         "id":1,
         "lotName":"Jarvis St \/ Carleton St",
         "availableSpots":8,
         "totalSpots":15
      }
   ]
}

main.js

var lotData;

$(document).ready(function() 
{
    $.getJSON({
        url: "parkingLots.json",
        mimeType: "application/json",
        success: parseParkingLotsJSON
    });
});

function parseParkingLotsJSON(data) 
{
    lotData = data.lotList;
    for (var i=0; i < lotData.length; i++) 
    {
        $("#size").append(appendLot(lotData[i], i));
    };
}
function appendLot(lotData)
{
    var lotName = lotData.lotName;
    var lotId = lotData.id;
    var lotAmount = lotData.availableSpots;
    var key = $("#sizeId").val();
    var size = $("<div " + lotId + "' data-role='table'>");
    if ( lotAmount ==  key ) {
    size.append("<h1>" + lotName + "</h1>");
    size.append("<p> Lot ID: " + lotId + "</p>");
    size.append("<p> Spots: " + lotAmount + "</p>");
    }
    return size;
}

var-lotData；
$（文档）.ready（函数（）
{
$.getJSON({
url:“parkingLots.json”，
mimeType：“应用程序/json”，
成功：ParseParkingLotsjsson
});
});
函数parseParkingLotsJSON（数据）
{
lotData=data.lotList；
对于（var i=0；ivar size=$（“这与
appendLot
方法访问
lotData
的方式有关。Lot数据是一个数组，因此需要使用索引访问它

var lotName = lotData[0].lotName;

另一个问题是使用
==
将
lotAmount
与
键进行比较。为了确保它们是数字，可以使用该方法

lotData
不需要传递到
appendLot
方法，因为它可用于整个
main.js

为了仅获取要匹配的第一个元素并将其附加到size元素作为概念证明，可以如下设置lot变量：

function appendLot()
{
    var lotName = lotData[0].lotName;
    var lotId = lotData[0].id;
    var lotAmount = lotData[0].availableSpots;
    var key = $("#sizeId").val();
    var size = $('#size');
    if ( parseInt(lotAmount, 10) ===  parseInt(key, 10) ) {
        size.append("<h1>" + lotName + "</h1>");
        size.append("<p> Lot ID: " + lotId + "</p>");
        size.append("<p> Spots: " + lotAmount + "</p>");
    }
}

如果您有任何其他问题，请告诉我。希望有帮助。
此应用程序是否正在尝试加载数据，将其绑定到页面，然后根据可用插槽上的匹配搜索停车位？是的，它应该只显示与用户指定的停车位数量相同的停车位的数据。这是我希望它执行的操作。它是d显示文本框中指定的具有8个可用停车位的停车场的信息。唯一的问题是，我只能通过刷新此页面来获得此结果。当我单击按钮时，列表不会更新，只能通过刷新来完成。我希望在单击搜索按钮后使其工作。谢谢你，最后一个块几乎完成了好了！现在它是在点击按钮时添加的，但每次我点击按钮时它都会不断添加到页面上。你知道如何清除信息以交换新信息吗？例如：当我在搜索栏中键入7时，会显示带有7个点的批次信息。但是，如果我在搜索栏中键入8，我需要批次的批次信息th 8个点将其放置在视图中。不客气。在添加新匹配项之前，需要清除大小元素。请看以下问题：。已接受答案下面的答案将帮助您开始。：）您也可以在此处查看以供参考：太好了！非常感谢您的帮助！我非常感谢。
function appendLot()
{
    var lotName = lotData[0].lotName;
    var lotId = lotData[0].id;
    var lotAmount = lotData[0].availableSpots;
    var key = $("#sizeId").val();
    var size = $('#size');
    if ( parseInt(lotAmount, 10) ===  parseInt(key, 10) ) {
        size.append("<h1>" + lotName + "</h1>");
        size.append("<p> Lot ID: " + lotId + "</p>");
        size.append("<p> Spots: " + lotAmount + "</p>");
    }
}

function appendLot()
{
    var size = $('#size');
    for (var i = 0; i < lotData.length; i++) {
        var lotAmount = lotData[i].availableSpots;
        var key = $("#sizeId").val();
        if ( parseInt(lotAmount, 10) ===  parseInt(key, 10) ) {
            size.append("<h1>" + lotData[i].lotName + "</h1>");
            size.append("<p> Lot ID: " + lotData[i].id + "</p>");
            size.append("<p> Spots: " + lotAmount + "</p>");
        }
    }
}