如何分别识别动态listview行来识别点击了哪一行

Question

我正在摆弄一个谷歌地图教程，其中我有一个使用 JSON 来自数据库的值标记动态填充的地图。除此之外，我还有一个列表视图，它还动态填充了来自同一数据库的每个标记的名称。 I am trying to pan to the location of the marker's lat and lon when the the name of the store in the listview is selected.

例如。用户在列表视图中选择麦当劳。然后将它们平移到地图上的麦当劳标记位置。

我想应该以某种方式使用列表视图中每一行的 id 来匹配数组中的 lat 和 lon 值，然后使用商店的 lat 和 long 的 map.panTo() 函数。我是 JSON 新手，因此不确定如何执行此操作，因为它都是动态的，而且都卡在一个循环中。

动态列表视图的jQuery发布在下面。

JS

var file = "getsome.php";

$.post(file, function(data) {

var output = '';

$.each(data, function(index, value){ 

    output += '<li><a href="#" id='+ value.site_id +'" class="latlon">' + value.site_name + '</a></li>';

}); $('#listview-id').html(output).listview().listview('refresh'); }, "json");

getsome.php

require("dbconnect.php");

try {
  $DBH = new PDO("mysql:host=$server;dbname=$database;charset=utf8", $username, $password,
                    array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
}
 catch (PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die();
}

$STH = $DBH->prepare("SELECT * FROM Site WHERE 1");

$STH->execute();

$result = $STH->fetchAll();

echo json_encode($result);

Answer 1

您可以使用此方法。在示例中，我使用 (closest) 从 Listview 项目中获取一些数据。当您动态填充列表视图项时，您可以插入数据属性 -- data-whatever="the data" -- 例如 (data-address="10 maple Street" data-lat="45.6789" data-lng="56.6786")等等

演示

http://jsfiddle.net/g5tvj3xp/

<ul data-role="listview" id="listview">
    <li data-id="row1">Row 1</li>
    <li data-id="row2">Row 2</li>
    <li data-id="row3">Row 3</li>
    <li data-id="row4">Row 4</li>
</ul>


$("#listview").on("click", ">li", function(event, ui) {
var id = $(this).closest("li").attr('data-id');
alert(id)
});