点击按钮淡入下两个元素功能异常问题排查

嘿，我来帮你拆解下这两个问题的根源，再给你修正后的代码：

问题出在哪？ #

1. 点击仅显示一个div：你的原选择器$(".content").nextAll(':lt(2)')会选中.content之后的前两个元素，但如果其中某个元素本来就是显示状态（比如初始没加.hide类），fadeIn对已显示的元素不会有任何效果，看起来就只显示了一个。
2. 首次点击后无法重复触发：第一次点击后，那两个元素已经显示了，后续点击还是会选中这两个已显示的元素，fadeIn自然不会再起作用，所以就没反应了。

修正后的代码 #

假设你的HTML结构是这样的（初始时需要显示的div之外，其他都加了.hide类）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button">点击显示更多</button>
<div class="content">Content 1...</div>
<div class="content hide">Content 2...</div>
<div class="content hide">Content 3...</div>
<div class="content hide">Content 4...</div>
<div class="content hide">Content 5...</div>

对应的CSS保持不变：

.hide { display: none; }

修正后的JS代码：

$(".button").click(function() {
  // 只选中还隐藏的.content元素，取前两个进行显示，同时移除hide类避免下次重复选中
  $(".content.hide").slice(0, 2).fadeIn("slow").removeClass("hide");
});

如果你的结构是.content只有一个，后面是其他类名的div（比如.item），那可以把JS改成这样：

$(".button").click(function() {
  $(".content").nextAll(".item.hide").slice(0, 2).fadeIn("slow").removeClass("hide");
});

为什么这样能解决问题？ #

• 用.hide类精准定位未显示的元素，确保每次选中的都是还没展示的内容，不会包含已显示的，解决了“只显示一个”的问题。
• 显示后移除.hide类，下次点击时就会选中下一组未显示的元素，自然就能重复触发啦～

内容的提问来源于stack exchange，提问作者Max Di Campo