AJAX在for-in循环中迭代数据库值，但不在click事件中迭代

Question

我正在对填充div元素的数据库进行AJAX调用，当用户点击按钮时，它会根据他们点击的内容进行填充。当我在for-in循环中执行控制台日志时，脚本会在每个表中正确迭代，并将每个所需的值打印到控制台。但是，当我将控制台置于循环外的单击事件时，我只从最后一个表中获取值。

的jQuery

$.post("../php/populate_script.php", function(data){
    jsonData = window.JSON.parse(data);
    var row = data;
    var scenario_id;
    var date_created;
    var initials;
    var aircraft;
    var city1;
    for(var i in jsonData){
        row = jsonData[i];
        scenario_id = row["id"];
        date_created = row["created"];
        initials = row["initials"];
        aircraft = row["aircraft"];
        city1 = row["city_pair1"];
        console.log(city1);
    }
    $(".view").each(function(){
        $(this).on("click", function(){
            console.log(city1);
        })
    })
})

日志我看到console.log在for-in循环中

日志我看到console.log何时在点击事件中

如您所见，它只返回click事件中的最后一个值。谁能告诉我我做错了什么？

Answer 1

city1 是在post回调范围内定义的变量。功能

function(){
    console.log(city1);
}

仅在实际单击具有.view类的元素之一时执行。那时 city1 变量分配了最后一个值，在你的情况下是“2”。

您可以使用data()方法将变量保存在元素本身上，如下所示：

for(var i in jsonData){
    row = jsonData[i];
    scenario_id = row["id"];
    date_created = row["created"];
    initials = row["initials"];
    aircraft = row["aircraft"];
    city1 = row["city_pair1"];

    ... create you button in the dom ...

    button.addClass('view');
    button.data('row', row);

    console.log(city1);
}

然后您可以在点击回调中检索城市，如下所示：

$(".view").on('click', function(){
    console.log($(this).data('row'));
});

请注意，您可以避免使用每个元素，并使用类.view直接绑定每个元素上的click事件。

Answer 2

另一种方法是将包含值的变量放入对象ScenarionInfo[i]{}中，在click事件中，使用其中一个值作为迭代器常量，例如id字段。所以在你的点击事件中，放置这样的东西

var id = $(this).data("id");

然后只需将值附加到您想要的位置。