如何分別識別動態列表視圖行以確定哪個行被點擊

Question

我在擺弄谷歌地圖教程，在那裏我有一個動態地使用JSON數據庫中的值標記填充的地圖。除此之外，我還有一個列表視圖也可以動態填充來自同一個數據庫的每個標記的名稱。當我選擇列表視圖中的商店名稱時，我試圖平移到標記的lat和lon的位置。

例如，用戶在列表視圖中選擇麥當勞。然後他們被轉移到地圖上的麥當勞標記位置。

我想象一下，listview中每行的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

您可以使用此方法。在這個例子中，我使用（最近）從Listview項目中獲取一些數據。當您動態填充列表視圖項時，您可以插入數據屬性 - data-whatever =「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) 
});