如何使jQuery load()适用于数组的所有元素，而不仅仅是最后一个元素

Question

我有一个按名称显示数据馈送列表的网页(下面的dataFeed变量)，并且我正在尝试模拟一个弹出窗口，当用户单击数据馈送名称旁边的图标(dataFeed + 'dataLink')时，该弹出窗口包含有关数据馈送的更多信息。我有一个隐藏的div (diagWindow)，其中包含一个填充了关于提要的信息的div (diagWindowContent)。getDiagData.php页面使用传递给它的dataFeed参数返回我想要显示的信息。

一开始我试过这个。

for (i = 0; i < dataFeeds.length; i++) {
    dataFeed= dataFeeds[i];

    $('#' + dataFeed+ 'diagLink').click(function() {
        $('#diagWindow').toggle();
        $('#diagWindowContent').load('getDiagData.php?dataFeed=' + dataFeed);
    });
}

但这只显示了为dataFeeds数组中的最后一个dataFeed返回的页面。

然后，我尝试在toggle()上使用一个回调方法，如下所示...

for (i = 0; i < dataFeeds.length; i++) {
    dataFeed= dataFeeds[i];

    $('#' + dataFeed+ 'diagLink').click(function() {
        $('#diagWindow').toggle('fast', function(dataFeed) {
            return function() {
                $('#diagWindowContent').load('getDiagData.php?dataFeed=' + dataFeed);
            }(dataFeed)
        );            
    });
}

但这似乎具有相同的结果，即显示dataFeeds数组中最后一次数据馈送的信息。

我正在寻求帮助，了解如何在单击数据馈送名称旁边的图标时从getDiagData.php页面加载适当的数据馈送信息。

谢谢。

Answer 1

试试这个..。您没有在正确的上下文中执行它。

for (i = 0; i < dataFeeds.length; i++) {
    (function(num){
        var dataFeed = num;

        $('#' + dataFeed + 'diagLink').click(function() {
            $('#diagWindow').toggle();
            $('#diagWindowContent').load('getDiagData.php?dataFeed=' + dataFeed);
         });
    })(dataFeeds[i])
}​

Answer 2

这很可能是一个变量作用域问题，您可以尝试如下所示：

for (var i = 0; i < dataFeeds.length; i++) {
    var dataFeed= dataFeeds[i];

    $('#' + dataFeed+ 'diagLink').click(function() {
        $('#diagWindow').toggle();
        $('#diagWindowContent').load('getDiagData.php?dataFeed=' + dataFeed);
    });
}

请注意添加的var关键字

编辑:实际上，Sushanth的答案更正确。我相信Javascript中的变量是由函数限定作用域的，所以我上面的代码可能无法正常工作。他的遗嘱。