Question

在成功*= require来电时，我创建了一组带有预测天气数据的.ajax()。我想最初只显示带有div的{{1}}，并听取用户点击该元素以显示div

中的其他数据

JS来创建DIV：

class="forecast-list"

当DOM加载并将我的点击处理程序设置为...时，我隐藏了第二个<div class="box hide">。

 //HTML to append to document
                var html =
                    '<div class="forecast-list"><ul class="list">' +
                    '<li class="item" id="day">' + forecastDay + '</li>' +
                    '<li class="item"><canvas class="' + forecastIcon + '" width="40" height="40"></canvas></li>' +
                    '<li class="item forecastTemp" id="max">' + forecastMax + '</li>' +
                    '<li class="item forecastTemp" id="min">' + forecastMin + '</li>' +
                    '<li class="item"><span class="btn">+</span></li>' +
                    '</ul></div>' +

                    //The following div is hidden when the DOM loads
                    '<div class="box hide"><ul>' +
                    '<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></div><br><br>';

                //Append HTML to document
                $('.forecast').append(html);

点击后，隐藏的div显示，但在第二次点击时没有任何反应。我要查找的效果是，当您点击某一天的预测时，当天的数据会向下扩展到其自己的//Click event to unhide hidden forecast data $(document).on('click', '.forecast-list', function () { $(this).next($('.box')).toggleClass('hide', false); });。如果有另一个div打开了另一天的额外信息，则div应该关闭，以便一次只显示一个div div。

我最初尝试使用div代替class="box"，但最后只是将隐藏的div扩展和收缩四次然后保持关闭＆＃39;我认为＆＃39; ; s由于效果在slideToggle()循环内。

所有这些代码都存在于toggleClass()函数的.each()循环中，以便成功。

documented here

Answer 1

所以正在发生的事情是你在文档中添加一个点击处理程序n {n} {n} {n = .forcast-list循环的次数。因此，当您点击$.each时，它会运行切换n次。在这种情况下8次。

有两种方法可以解决这个问题：

只需将点击处理程序移到.forcast-list循环之外。

Modified code pen

修改$ .each中的点击处理程序，直接附加到$.each
```
.forcast-list
```

Answer 2

我在想这里可能会发生一些事情。

如果false总是作为第二个参数传递给toggleClass（），那么＆＃34;隐藏＆＃34;永远不会被添加回盒子div。我会完全放弃第二个参数。

另外，我认为next（）函数只会尝试在点击预测列表后立即对box div进行切换。

如果你做了类似的事情怎么办？

＆＃13;

$('.box').addClass('hide'); 
$(this).next($('.box')).removeClass('hide');

＆＃13;

我认为这会隐藏所有方框然后显示正确的方框。

来自Ajax .each（）的动态生成元素的toggleClass（）问题

2 个答案: