我想我在这里遗漏了一些东西。此Jquery Mobile 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;
}
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Parking Lot Web</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="main.css" />
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.31"></script>
<script src="main.js"></script>
</head>
<h1>Parking Lot App</h1>
<body class="ui-page-theme-a">
<div data-role="page" id="home">
<h1 class="center">Parking App</h1>
<ul>
<a data-role="button" href='#page1'>Group Size</a>
</ul>
</div>
<div id="page1" data-role="page" data-filter="true" class="center">
<!--Where it's displayed on page-->
<h1 class="center" data-role="content">Search by Lot Size</h1>
<input type = "text" id = "sizeId"/>
<input type = "button" id = "sizeBtn" value = "search" onclick="appendLot(lotData)"/>
<div id="size" data-role="table" class="center"></div>
</div>
</div>
</body>
</html>
如果您有任何建议或有办法我可以在点击按钮上加载数据而不必刷新，我将不胜感激。
这与appendLot方法访问lotData的方式有关。批次数据是一个数组，因此需要使用索引进行访问。
var lotName = lotData[0].lotName;
另一个问题可以是使用lotAmount比较key和===。为了确保它们是数字，可以使用parseInt()方法。
lotData不需要传递到appendLot方法，因为它可用于整个main.js。
为了获得匹配的第一个元素并将其附加到size元素作为概念证明，可以像这样设置批量变量：
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>");
}
}
要将所有匹配的批次附加到size元素，可以使用与上面类似的逻辑循环lotList数组。
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>");
}
}
}
如果您有任何其他问题，请告诉我。希望有所帮助。