Как выбрать элемент списка и показать детали динамически?

Question

Я использую jQTouch, чтобы сделать мобильную версию моего сайта, и мне нужна помощь.

Я использую функцию хранения html5. У меня есть список вакансий, и я хочу нажать на одну работу, и показывает эту информацию о работе в другом div.

Это мой код:

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> ты только что создал).