点击

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();
            });

切换操作虽然不能正常工作，但它只是反弹＆＃39;打开和关闭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调用，让它按预期工作。