每次用户单击同一个按钮时，如何显示 N 个 div？答案

【问题标题】：How do I show N divs every time user clicks same button?每次用户单击同一个按钮时，如何显示 N 个 div？
【发布时间】：2015-06-03 21:52:04
【问题描述】：

假设我们有 18 个 div，但其中只有 4 个是可见的，位于“查看更多”按钮下方。当用户单击此按钮时，我想显示接下来的 4 个 div，并重复此过程，直到不再显示 div。是否可以？我也无法找到答案并解决它。

【问题讨论】：

你能提供一些 HTML / javascript 来展示你到目前为止所做的尝试吗？也许通过jsfiddle？
与论坛网站不同，我们不使用“谢谢”、“感谢任何帮助”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?。顺便说一句，这是“提前致谢”，而不是“在先致谢”。

标签： javascript jquery html click show

【解决方案1】：

Here 是一个适合您的示例。基本上，单击时您只需要删除 div 上的隐藏类。

$(function(){
  $("#showMore").on("click", function() {
      var hiddenDivs = $('div.hidden');
      if (hiddenDivs.length > 0) {
        hiddenDivs.slice(0,4).removeClass('hidden');  
      }
  })
});

【讨论】：

【解决方案2】：

使用 .slice

使用 JQuery 选择器的工作示例 https://jsfiddle.net/duf9xcyz/

这将只允许您从 jquery 选择器中选择前 4 个项目

$('div:hidden').slice(0,4).show();

https://api.jquery.com/slice/

【讨论】：

这将只显示前 4 个 div.. 对 OP 解决问题没有任何帮助。
添加了应该解决该问题的隐藏选择器

【解决方案3】：

您可以在使用 jquery 单击“查看更多”按钮时创建 div。或者您可能拥有 html 中的所有 div，但将其中 14 个标记为“显示：无”并单击“查看更多”按钮，您可以使用 jquery 在单击按钮时切换下一个 4。

【讨论】：

【解决方案4】：

在 jQuery 中你可以这样做：

        var allDivs = $('div'),
            counter = 4; //initial number of divs displayed

        var showDivs = function() {
            for (var i = 0; i < 4; i = i + 1) {
                if (counter === allDivs.length) {
                    console.log('All divs are displaying');
                    break;
                }
                $(allDivs[counter]).show();
                counter = counter + 1;
            }
        };
        $('#aButton').click(showDivs);

【讨论】：