我有一个应用程序，它有一个页面，其中所有 id 都是从表中选择的，并且特定的信息位显示在 html 中。 我接下来想做的是将这些元素中的每一个作为一个整体作为一个链接到第二层。
这个下级页面将显示绑定到该行 id 的所有信息，是否可以以动态方式构建它？
我正在使用 jQuery mobile 构建页面，我想使用 1 个模板并将相关的 html 元素附加到其中，并使用 id 绑定信息填充每个模板。
我希望这有点道理，任何指导或建议将不胜感激。
上面的模型代表了我想要实现的目标，左图显示了表格中所有行的列表，单击其中一个后，您将被带到另一个页面，其中只有该特定 ID 的信息。
我可以为列表中的每个项目实现这一点吗？
【问题讨论】：
标签： javascript html jquery-mobile local-storage web-sql
这是一个很好的导航示例，实现起来并不难。
由于信息是一致的（每个 DB 行都有相同的列），因此只创建一个空模板（编辑：它现在基于您的 PasteBin）：
<div data-role="page" id="route_details">
<div data-role="header">
<a data-rel="back"><i class="fa fa-arrow-left"></i></a>
<h1 id="walkTitle"></h1>
</div>
<div data-role="main" class="ui-content">
<div class="finishedRouteInfo">
<div class="mapDetails" style="width: 100%; height: 150px;"></div>
<div class="ui-grid-a">
<div class="ui-block-a home_btns no_border">
<div class="ui-block-a finishedDistance"><i class="fa fa-map-marker"></i></div>
<div class="ui-block-b"><p>Distance <br/><span id="finalDistance" class="value"></span></p></div>
</div>
<div class="ui-block-b home_btns">
<div class="ui-block-a finishedDistance"><i class="fa fa-clock-o"></i></div>
<div class="ui-block-b finishedDuration"><p>Duration <br/><span class="value" id="finalDuration"></span></p></div>
</div>
<span class="horizontalSplitter"></span>
<div class="walkDescription"></div>
</div>
</div>
</div>PasteBin 中的代码无法运行，因为您正在创建多个具有相同 ID 元素的页面（即：finalDistance、finalDuration）。此外，您正在创建许多用户可能永远看不到的页面。
所以，简化你的加载函数：
var last_results = [];
$(document).on("pageinit", "#my-routes", function() {
db.transaction(function(t){
t.executeSql('SELECT * FROM WALKS', [], querySuccess, errorCB);
});
function querySuccess(t, results, Element) {
last_results = results;
}
});
并在显示带有路线详细信息的页面之前延迟内容/地图的创建：
$("#route_details").on("pagecontainerbeforeshow", function()
{
// use your DB data
var data = last_results.rows.item(clicked_route);
$("#walkTitle).html(data.WalkTitle);
$(".walkDescription").html(data.WalkDescription);
// ...create the map and fill the rest...
});
你只需要将每条路由链接到这个页面，在点击链接时设置clicked_route，如下所示：
<a class="walkPage" href="#route_details" data-route="0">Route 0</a>
<a class="walkPage" href="#route_details" data-route="1">Route 1</a>
<a class="walkPage" href="#route_details" data-route="2">Route 2</a>
JavaScript：
$(document).on("click", ".walkPage") {
clicked_route = parseInt($(this).attr("data-route"));
});
...由于您必须在两个不同的页面中显示路线图，请重构您的代码，以便您可以轻松地创建地图并将其添加到任何页面。
希望它足够清楚以完全实现它。
【讨论】：