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

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

0 голосов
/ 29 ноября 2010

Я использую 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']);
});
}

Список рабочих мест в порядке, но когда я нажимаю на одну из них, всегда отображается последняя работа.

Спасибо!

1 Ответ

1 голос
/ 29 ноября 2010

Это должно выглядеть следующим образом (без слишком большого изменения макета): 

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, даже если она находится внутри forloop, является областью действия для всей функции, и она заменяется на каждой итерации ... и заканчивается тем, что становится последним значением (именно поэтому вы каждый раз видите последнее 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> Вы только что создали).

...