Comment sélectionner un élément de liste et afficher les détails de manière dynamique?

Question

Im utilisant jQTouch pour faire une version mobile de mon site web, et j'ai besoin d'aide.

Im utilisant la fonction de stockage html5. J'ai une liste d'emplois et je veux cliquer sur un travail, et montre cette information de travail dans un autre div.

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

Les emplois énumèrent ok, mais quand je tape sur l'un d'eux, montre toujours le dernier emploi.

Merci!

Answer 1

Il devrait ressembler à ceci (sans changer votre mise en page trop):

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 n'a pas la portée de bloc ici, donc cette variable row, même si elle est à l'intérieur de la boucle for, est portée à la fonction entière, et il est remplacé à chaque itération ... et finit par être la dernière valeur (c'est pourquoi vous voyez la dernière id à chaque fois).

Une aminci la version en profitant de ce nouveau champ d'application serait:

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

Cette décision déclare ces autres variables uid et jod_name seulement là où ils sont nécessaires, et a éliminé le traversal supplémentaire dans la boucle (trouver le <li> que vous venez de créer).