如何選擇列表項並動態顯示詳細信息？

Question

使用jQTouch製作我的網站的移動版本，我需要一些幫助。

即時通訊使用html5存儲功能。我有一份工作清單，我想點擊一份工作，並在另一份工作表中顯示工作信息。

這是我的代碼：

var uid; 
var job_name; 

for (var i=0; i<results.rows.length; i++) {  
var row = results.rows.item(i); 

uid = row['id']; 
job_name = row['job_name']; 

$("ul#my_jobs").append('<li class="arrow" id="job_' + uid +'"><a class="fade" href="#prueba">' + job_name + '</a></li>'); 


$("li#job_" + row['id']).bind('tap', function(){ 
    $("#job_detail").html(row['id']); 
}); 
} 

的作業清單確定，但是當我在他們中的一個水龍頭，總是顯示上次工作。

謝謝！

Answer 1

它應該像這樣（不改變你的佈局太多）：

var uid, job_name; 
for (var i=0; i<results.rows.length; i++) {  
    var row = results.rows.item(i); 
    uid = row['id']; 
    job_name = row['job_name']; 

    $("ul#my_jobs").append('<li class="arrow" id="job_' + uid +'"><a class="fade" href="#prueba">' + job_name + '</a></li>'); 
    (function(id) { 
    $("li#job_" + id).bind('tap', function(){ 
     $("#job_detail").html(id); 
    }); 
    })(uid) 
} 

JavaScript沒有這兒塊範圍，使row變量，即使它的for循環內，是範圍整個函數，並且每次迭代都會被替換...並最終成爲最後一個值（這就是爲什麼您每次都能看到最後一個id）。

簡化版本，採用這種新的範圍好處是：

for (var i=0; i<results.rows.length; i++) {  
    var row = results.rows.item(i); 
    (function(uid, job_name) { 
    $('<li class="arrow" id="job_' + uid +'"><a class="fade" href="#prueba">' + job_name + '</a></li>').bind('tap', function(){ 
     $("#job_detail").html(uid); 
    }).appendTo("#my_jobs"); 
    })(row['id'], row['job_name']); 
} 

這聲明他們需要的地方與其他uid和jod_name變量，消除了環路內的額外遍歷（尋找<li>你剛剛創建）。