javascript - 使用函数数据动态加载onclick函数

Question

好吧，我的编码有点弱，但我正在学习。我有一个类似于的代码

$.post("test.php", {"data":"data"}, function(grabbed){
    $.each(grab, function(i, item){
        var place = document.getElementById("div");
        var para = createElement("p");
        para.innerHTML = item.name;
        para.onclick = function(){
            document.getElementById(?para?).innerHTML = ?item.price?;
        }
        place.appendChild(para);
    });
}, "json");

我的问题是如何在 onclick 函数中使用 item.price 。我还没有真正尝试过，但我很确定引用从请求中检索到的数据在动态加载的 onclick 函数中不起作用。

我的函数的工作原理有点不同，但基本原理就在这里。任何建议将不胜感激，或者也许有人可以指出我正确的方向。

我正在考虑将 id 分配给 div 或 para 并以某种方式在函数中使用它们。我也想过用cookie来存储我想要的数据，但是想不通。还有什么我需要知道或尝试的吗？

Answer 1

您的问题涉及 closures 的概念在 JavaScript 中。

Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created.

考虑以下代码片段:

var foo = (function(){
    var remembered = "yea!";

    return function(){
        console.log("Do you remember? - " + remembered);
    };
})();

foo(); // prints: Do you remember? - yea!

也就是说，看看你的代码:

...
// the function assigned to `onclick` should remember
// the variable `item` in the current context.
para.onclick = function(){
    document.getElementById(?para?).innerHTML = ?item.price?;
}
...

这是可行的，因为您使用 JQuery 的 $.each() 进行迭代。和here是一个演示:http://jsfiddle.net/55gjy3fj/

但是，如果您使用普通的 for 循环进行迭代，则必须将处理程序包装在另一个闭包中:

var getHandler = function(para, item){
    return function(){
        document.getElementById(the_id_here).innerHTML = item.price;
    };
};
para.onclick = getHandler(para, item);
...

This fiddle证明了这一点:http://jsfiddle.net/63gh1gof/

Here's总结这两种情况的 fiddle :