单击时从 AJAX .each() 循环附加数据

Question

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

我正在使用 Ajax 和 .each() 以 jsonp 格式检索我的数据。我的 .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();
            });

虽然开关动作不正常，它只是 'bounces' 打开和关闭 4 次，然后保持关闭状态。这是因为切换在 .each() 循环内吗？

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

Answer 1

根据你的问题我了解到。您需要从 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');

Answer 2

通过移动...

 //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 调用内，它按预期工作。

单击时从 AJAX .each() 循环附加数据

Appending data from AJAX .each() loop on click

javascript

ajax

each

jquery