Wie wählt man einen Listeneintrag und zeigt die Details dynamisch an?

Question

Ich benutze jQTouch, um eine mobile Version meiner Website zu machen, und ich brauche Hilfe.

Im mit html5 Speicherfunktion. Ich habe eine Liste von Jobs und ich möchte auf einen Job klicken und zeigt diese Job-Informationen in einem anderen div.

Dies ist mein Code:

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']); 
}); 
} 

Die Jobs werden Listing in Ordnung, aber wenn ich auf einem von ihnen tippen, zeigt immer den letzten Job.

Danke!

Answer 1

Es sollte so aussehen (ohne Ihr Layout zu viel zu ändern):

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 Block Umfang nicht hier hat, so dass row Variable, obwohl es in der for Schleife ist, ist, den Umfang zu die gesamte Funktion, und es wird jede Wiederholung ersetzt ... und endet als der letzte Wert (weshalb Sie die letzte id jedes Mal sehen).

Eine abgespeckte Version Vorteil dieses neuen Geltungsbereichs wäre:

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']); 
} 

Dies erklärt die anderen uid und jod_name Variablen nur dort, wo sie gebraucht werden, und eliminiert die zusätzliche Traversal in der Schleife (die Suche nach <li> Sie gerade erstellt).