Question

我有一个网页，按名称显示数据Feed列表（下面的dataFeed变量），我试图模拟一个弹出窗口，其中包含有关用户点击图标时数据Feed的更多信息（ dataFeed +'dataLink'）数据Feed名称旁边。我有一个隐藏的div（diagWindow），其中包含一个div（diagWindowContent），该div填充了有关feed的信息。 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数组中最后一个数据Feed的信息。

我正在寻求帮助，找出如何在点击数据Feed名称旁边的图标时从getDiagData.php页面加载相应的数据Feed信息。

谢谢。

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中的变量是由函数确定的，所以我的上面的代码可能无法正常工作。他的意志。

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

2 个答案: