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>）。

如何选择列表项并动态显示详细信息？

1 个答案: