单击时从 AJAX .each(） 循环追加数据

Appending data from AJAX .each() loop on click

本文关键字：循环 追加 数据 each AJAX 单击      更新时间：2023-09-26

我正在尝试模拟 http://www.forecast.io 对他们的每日预测所做的工作，您可以单击每天的行并在显示日出时间，日落时间等的slidedown((框中获取更多详细信息。

我正在使用 Ajax 和 .each(( 以 jsonp 格式检索我的数据。 我在 .each(( 循环中有一个我的点击处理程序，因为我需要访问存储每天信息的变量。 我知道我需要监听单击并在 each 循环之外附加信息，但是如果我在循环外设置我的功能，我将无法访问本地存储在 .each(( 循环中的变量。

我尝试附加的 html 是...

var forecastData = 
            '<ul class="box hide">' +
            '<li>SUNRISE: ' + sunriseTime + '</li>' +
            '<li>SUNSET: ' + sunsetTime + '</li>' +
            '<div class="box-second-line">' +
            '<li>LOW: ' + forecastMin + ' @' + minTempTime + '</li>' +
            '<li>HIGH: ' + forecastMax + ' @' + maxTempTime + '</li>' +
            '</ul></div><br><br>';

这些变量中的这些数据来自 .each(( 循环中的 jsonp。

如何在每个循环之外附加每天的信息？

我已经添加了这个...

//Click event to show more forecast data
             $(document).on('click', '.forecast-list', function () {
                        $(this).next('.forecast-data').append(forecastData);
                });

。在 .each(( 循环中，现在正在附加我想要的信息。 现在的问题是，当我点击某一天时，未来预测的所有 7 天的所有数据都会同时添加。 我需要挑出每一天，以便当单击例如星期二的元素时，只添加星期二一天的数据。

我已经让我的点击处理程序为每天附加正确的信息，但没有我在切换功能方面遇到问题。

我的新点击处理程序如下...

 //Click event to unhide hidden forecast data
            $(document).on('click', '.forecast-list', function () {
                $(this).next($('.box')).slideToggle();
            });

但是，切换操作无法正常工作，它只是"反弹"打开和关闭 4 次，然后保持关闭状态。 这是因为切换开关在 .each(( 循环内吗？

这是我为该项目编写的代码笔。 http://codepen.io/DDD37/pen/GozGGx

正如我从你的问题中了解到的那样。您需要从 ajax 成功函数外部访问 JSON 数据。

只需将 JSON 数据存储在任何控件的数据属性中，然后稍后即可找到相同的 JSON 数据。

在页面旁边添加div 标签

<div id="forecast" style="display:none" data-futureforecast=""></div>

和 JS 文件

$.ajax({
url: apiURL,
dataType: "jsonp",
success: function(json) {
$('div#forecast').data('futureforecast',json);
//----
your code
//--
}
});

现在您可以稍后找到数据

var forecastData= $('div#forecast').data('futureforecast');

通过移动...

 //Click event to unhide hidden forecast data
            //Create a function that combines both the fade and toggle effects
            $.fn.slideFadeToggle = function (speed, easing, callback) {
                return this.animate({
                    opacity: 'toggle',
                    height: 'toggle'
                }, speed, easing, callback);
            };
            //Listen to the document(the elements are created dynamically) for click on the forecasts to invoke
            //the slideFadeToggle function
            $(document).on('click', '.forecast-list', function () {
                $(this).next($('.box')).slideFadeToggle('6000', 'linear');
            });

。在.each()循环之外，但仍然独立.ajax调用，使其按预期工作。

相关文章：