javascript - 单击时从 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() 循环内，现在正在附加我想要的信息。现在的问题是，当我单击某一天时， future 预测的所有 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

Answer 1

据我从你的问题中了解到。您需要从 ajax success 函数外部访问 JSON 数据。

只需将 JSON 数据存储在任何控件的 data 属性中，然后您就可以找到相同的 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');