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

Question

假设我们有 18 个 div，但只有 4 个可见，位于 "see more" 按钮下方。我想在用户单击此按钮时显示接下来的 4 个 div，并重复此过程，直到没有更多的 div 可显示。可能吗？我也找不到答案也无法解决。

Answer 1

使用.slice

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

这将允许您仅 select jquery select 或

的前 4 项

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

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

Answer 2

您可以在使用 jquery 单击 'see more' 按钮时创建 div(s)。或者您可能在 html 中拥有所有 div，但用 'display:none' 标记了其中的 14 个并单击了 'see more' 按钮，您可以使用 jquery 切换下一个 4当按钮被点击时。

Answer 3

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

上隐藏的 class

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

Answer 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);

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

How do I show N divs every time user clicks same button?

html

javascript

jquery

click

show