如何在 JavaScript 中复制变量？

发布于 2024-08-24 01:49:30 字数 669 浏览 4 评论 0原文

我有这样的 JavaScript 代码：

for (var idx in data) {
    var row = $("<tr></tr>");
    row.click(function() { alert(idx); });
    table.append(row);
}

所以我正在查看一个数组，动态创建行（我创建单元格的部分被省略，因为它不重要）。重要的是我创建了一个包含 idx 变量的新函数。

然而，idx只是一个参考，因此在循环结束时，所有行都具有相同的功能并且所有警报具有相同的值。

我目前解决这个问题的一种方法是这样做：

function GetRowClickFunction(idx){
    return function() { alert(idx); }
}

在调用代码中我称之为

row.click(GetRowClickFunction(idx));

This 有效，但有点难看。我想知道是否有更好的方法来复制循环内 idx 的当前值？

虽然问题本身不是 jQuery 特有的（它与 JavaScript 闭包/作用域相关），但我使用 jQuery，因此如果可行的话，仅 jQuery 的解决方案是可以的。

原文

I have this JavaScript code:

for (var idx in data) {
    var row = $("<tr></tr>");
    row.click(function() { alert(idx); });
    table.append(row);
}

So I'm looking through an array, dynamically creating rows (the part where I create the cells is omitted as it's not important). Important is that I create a new function which encloses the idx variable.

However, idx is only a reference, so at the end of the loop, all rows have the same function and all alert the same value.

One way I solve this at the moment is by doing this:

function GetRowClickFunction(idx){
    return function() { alert(idx); }
}

and in the calling code I call

row.click(GetRowClickFunction(idx));

This works, but is somewhat ugly. I wonder if there is a better way to just copy the current value of idx inside the loop?

While the problem itself is not jQuery specific (it's related to JavaScript closures/scope), I use jQuery and hence a jQuery-only solution is okay if it works.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清风疏影 2024-08-31 01:49:30

您可以将该函数放入循环中：

for (var idx in data) {
  (function(idx) {
    var row = $("<tr></tr>");
    row.click(function() { alert(idx); });
    table.append(row);
  })(idx);
}

现在，我想给您的真正建议是停止像这样进行事件绑定并开始使用 jQuery“live”或“delegate”蜜蜂。这样您就可以为表中的所有行设置一个处理程序。为每一行提供“idx”值作为“id”或“class”元素或其他元素，以便您可以在处理程序中将其拉出。（或者我想你可以把它藏在“数据”扩展中。）

You could put the function in your loop:

for (var idx in data) {
  (function(idx) {
    var row = $("<tr></tr>");
    row.click(function() { alert(idx); });
    table.append(row);
  })(idx);
}

Now, the real advice I'd like to give you is to stop doing your event binding like that and to start using the jQuery "live" or "delegate" APIs. That way you can set up a single handler for all the rows in the table. Give each row the "idx" value as an "id" or a "class" element or something so that you can pull it out in the handler. (Or I guess you could stash it in the "data" expando.)

回复收藏 0 原文