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

我试图模仿他们的每日预测，你可以点击每天的行，在一个显示日出时间、日落时间等的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（）循环中，现在添加我想要的信息。现在的问题是，当我单击某一天时，未来预测的所有7天的所有数据都将同时添加。我需要挑出每一天，以便在单击例如星期二的元素时，只添加星期二的数据。

我已经让我的点击处理程序为每天添加适当的信息，但是没有，我对切换功能有问题

我的新点击处理程序如下所示

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

不过，切换操作无法正常工作，它只是“反弹”打开和关闭4次，然后保持关闭。这是因为切换在.each（）循环中吗

---

这是我的项目代码笔

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

只需将JSON数据存储在任何控件的data属性中，以后就可以找到相同的JSON数据

在页面的侧面添加一个div标记

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

现在，您可以稍后找到您的数据

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

调用中，使其按预期工作。

我可能会将HTML常量字符串保留在外部某处，并读取某种数据数组中的数据。然后我会有一个函数，它可以将object转换成你需要的字符串。因此，您可以调用

formatStr（forecastData[1]）

，

formatStr（forecastData[2]）

…我在将显示设置为“无”时遇到的问题是，创建元素时，会在隐藏json数据的地方留下一个空白。我想要的效果是，当用户单击元素时，隐藏的信息会添加滑动下降效果，这样所有的子元素都会被向下推，以便为新添加的数据“腾出空间”。

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