隐藏所有文章并在我们单击下一步并预览时按 5 乘 5 显示它们

Question

我正在开发一个 jsfiddle，我的目标是当我们点击 "prev/next" 按钮，我们可以看到 5 篇下一篇或 5 篇上一篇文章，但是所有其他的都必须隐藏。

这时候我可以点击"prev / next"按钮，然后我们就可以查看 5 篇下一篇或 5 篇上一篇文章，但所有其他文章都是已经可见保持可见。

这是我的例子，可能有人有更简单的想法：

$(document).ready(function () {
    size_article = $("#myList article").size();
    x=5;
    $('#myList article:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_article) ? x+5 : size_article;
        $('#myList article:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('#myList article').not(':lt('+x+')').hide();
    });
});

#myList article{
display: none;
}

#loadMore {
color: green;
cursor: pointer;
}

#showLess {
color: red;
cursor: pointer;
}

#loadMore:hover, #showLess:hover {
color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>



<div id="myList">
    <article>One</article>
    <article>Two</article>
    <article>Three</article>
    <article>Four</article>
    <article>Five</article>
    <article>Six</article>
    <article>Seven</article>
    <article>Eight</article>
    <article>Nine</article>
    <article>Ten</article>
    <article>Eleven</article>
    <article>Twelve</article>
    <article>Thirteen</article>
    <article>Fourteen</article>
    <article>Fifteen</article>
    <article>Sixteen</article>
    <article>Seventeen</article>
    <article>Eighteen</article>
    <article>Nineteen</article>
    <article>Twenty one</article>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

Answer 1

您正在寻找分页。有几种方法或库可以实现它。如果你想要原始 javascript 的东西，你可以看看这个：Simple pagination in javascript。这符合我假设的您的期望。

你可以这样做：

var current_page = 1;
var records_per_page = 5;
var listing_table = document.querySelectorAll('#myList article');

function prevPage() {
  if (current_page > 1) {
    current_page--;
    changePage(current_page);
  }
}

function nextPage() {
  if (current_page < numPages()) {
    current_page++;
    changePage(current_page);
  }
}

function changePage(page) {
  var btn_next = document.getElementById("loadMore");
  var btn_prev = document.getElementById("showLess");
  // Validate page
  if (page < 1) page = 1;
  if (page > numPages()) page = numPages();

  for (i = 0; i < listing_table.length; i++) {
    listing_table[i].style.display = "none";
  }

  listing_table.innerHTML = "";
  for (var i = (page - 1) * records_per_page; i < (page * records_per_page); i++) {
    listing_table[i].style.display = "block";
  }

  if (page == 1) {
    btn_prev.style.visibility = "hidden";
  } else {
    btn_prev.style.visibility = "visible";
  }

  if (page == numPages()) {
    btn_next.style.visibility = "hidden";
  } else {
    btn_next.style.visibility = "visible";
  }
}

function numPages() {
  return Math.ceil(listing_table.length / records_per_page);
}

window.onload = function() {
  changePage(1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="myList">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
  <article>Four</article>
  <article>Five</article>
  <article>Six</article>
  <article>Seven</article>
  <article>Eight</article>
  <article>Nine</article>
  <article>Ten</article>
  <article>Eleven</article>
  <article>Twelve</article>
  <article>Thirteen</article>
  <article>Fourteen</article>
  <article>Fifteen</article>
  <article>Sixteen</article>
  <article>Seventeen</article>
  <article>Eighteen</article>
  <article>Nineteen</article>
  <article>Twenty one</article>
</div>
<div id="loadMore" onclick="nextPage()">Load more</div>
<div id="showLess" onclick="prevPage()">Show less</div>

Answer 2

正如我在最初的评论中所说，我仍然认为 pagination 是最好的方法，请在此处再次查看：Pagination along with it's example: Pagination Example

但是，我实施了一个简单的 JQuery 解决方案，应该可以让您摆脱困境！

参见fiddle：JSFiddle

var articles = $('article');
var groupNum = 0;
var currentGroupNum = 0;
$.each(articles, function(index, value) {
  $(this).attr("class", "group" + groupNum);
  if ((index + 1) % 5 === 0) {
    groupNum++;
  }
});


$('#loadMore').on('click', function() {  
    $(".group" + currentGroupNum).show()
    currentGroupNum++;
});

$('#showLess').on('click', function() {
 $(".group" + (currentGroupNum - 1)).hide()
    currentGroupNum--;
});

#myList article {
   display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#showLess {
  color: red;
  cursor: pointer;
}

#loadMore:hover,
#showLess:hover {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myList">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
  <article>Four</article>
  <article>Five</article>
  <article>Six</article>
  <article>Seven</article>
  <article>Eight</article>
  <article>Nine</article>
  <article>Ten</article>
  <article>Eleven</article>
  <article>Twelve</article>
  <article>Thirteen</article>
  <article>Fourteen</article>
  <article>Fifteen</article>
  <article>Sixteen</article>
  <article>Seventeen</article>
  <article>Eighteen</article>
  <article>Nineteen</article>
  <article>Twenty one</article>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

本质上，它的作用是：

每5个元素加一个group
点击show，它会记录最后显示的组并显示下一个
点击hide，会保留最后显示的组，少显示一个

有任何问题，请告诉我！

Answer 3

您可以使用 slice() 作为 $(this).slice(start_index, end_index) 来获取下一个或上一个 5 个元素。

$(document).ready(function() {
  size = $('#myList article').length;
  x = 5;
  $('#myList article:lt(' + x + ')').show();
  $('#loadMore').click(function() {
    if (x + 5 > size) return;
    $('#myList article').hide();
    $('#myList article').slice(x, x + 5).show();
    x += 5;
  });
  $('#showLess').click(function() {
    if (x - 5 <= 0) return;
    $('#myList article').hide();
    x -= 5;
    $('#myList article').slice(x - 5, x).show();
  });
});

#myList article {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#showLess {
  color: red;
  cursor: pointer;
}

#loadMore:hover,
#showLess:hover {
  color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>



<div id="myList">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
  <article>Four</article>
  <article>Five</article>
  <article>Six</article>
  <article>Seven</article>
  <article>Eight</article>
  <article>Nine</article>
  <article>Ten</article>
  <article>Eleven</article>
  <article>Twelve</article>
  <article>Thirteen</article>
  <article>Fourteen</article>
  <article>Fifteen</article>
  <article>Sixteen</article>
  <article>Seventeen</article>
  <article>Eighteen</article>
  <article>Nineteen</article>
  <article>Twenty one</article>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>

Answer 4

如果您对高级实现感兴趣，请查看此代码。

支持运行时添加文章。只需添加一些文章即可并且会把他们组成一个小组
您可以配置一些选项，如动画持续时间、每组项目数、文章标签名称或 class 名称（需要手动添加 .），...

通过一些修改，您可以从中制作一个 jQuery 插件。它还使用 jQuery 淡入淡出动画。

// This is a closure
(function($) {

  'use strict';

  $(function() {
    var
      articles_parent,
      articles,
      //-----
      btn_next,
      btn_prev,
      btn_more,
      //-----
      inside_group_tag_or_class,
      //-----
      group_class,
      active_group_class,
      animation_time;
    var
      group_count,
      group_length,
      group_counter;
    var
      in_repair,
      i;
    var click_timeout;

    // assign value to variable(s)
    articles_parent = $('#myList');
    //-----
    inside_group_tag_or_class = 'article';
    //-----
    articles = articles_parent.find('> ' + inside_group_tag_or_class);
    group_class = 'each-group';
    active_group_class = 'active-group';
    //-----
    animation_time = 260;
    //-----
    btn_next = $('#loadMore');
    btn_prev = $('#showLess');
    btn_more = $('#moreArticles');
    //-----
    in_repair = false;
    //-----
    group_counter = 1;

    // calculate group count and length
    group_count = 5;
    group_length = Math.ceil(articles.length / group_count);

    // wrap group x to a new group
    function slicer(x) {
      var
        wrapper_element,
        current_group,
        //-----
        from,
        to;

      // assign value to variable(s)
      wrapper_element = '<div class="' + group_class + '" data-group="' + group_counter++ + '" />';
      //-----
      from = x * group_count;
      to = from + group_count;
      //-----
      current_group = articles.slice(from, to);
      current_group.wrapAll(wrapper_element);
    }

    function updateSlicer() {
      articles = articles_parent.find('> ' + inside_group_tag_or_class);
      group_length = Math.ceil(articles.length / group_count);

      // call slicer function to group each n article
      for (i = 0; i < group_length; i++) {
        slicer(i);
      }
    }

    function showGroup(action, repair) {
      animateGroupItems('show', action, repair);
    }

    function hideAllGroups() {
      animateGroupItems('hide');
    }

    function animateGroupItems(action, extra, repair) {
      repair = repair === false;

      var
        all_groups,
        active_group,
        active_group_items;
      //-----
      var idx;
      //-----
      all_groups = getAllGroups();
      active_group = getActiveGroup(repair);
      active_group_items = active_group.find('> ' + inside_group_tag_or_class);

      if (action === 'show') {
        var
          show_action,
          active_group_idx,
          first_groups_index,
          last_groups_index;
        //-----
        show_action = extra;
        active_group_idx = active_group.index();
        first_groups_index = 0;
        last_groups_index = all_groups.last().index();

        // check show action
        if (show_action === 'next') {
          if (active_group_idx !== last_groups_index) {
            idx = active_group_idx + 1;
          } else {
            resetClick();
            return;
          }
          hideAllGroups();
        } else if (show_action === 'prev') {
          if (active_group_idx !== first_groups_index) {
            idx = active_group_idx - 1;
          } else {
            resetClick();
            return;
          }
          hideAllGroups();
        } else {
          idx = first_groups_index;
          hideAllGroups();
        }

        setTimeout(function() {
          // main show action
          active_group.removeClass(active_group_class);
          all_groups.eq(idx).addClass(active_group_class);
          active_group = getActiveGroup(true);
          active_group_items = active_group.find('> ' + inside_group_tag_or_class);
          //-----
          active_group_items.show();
          active_group.stop().fadeIn(animation_time, function() {
            can_click = true;
          });
        }, 2 * animation_time);
      } else if (action === 'hide') {
        all_groups.stop().fadeOut(animation_time);
      }
    }

    function getActiveGroup(repair) {
      return checkActiveGroup(repair);
    }

    function getAllGroups() {
      return articles_parent.find('.' + group_class);
    }

    function checkActiveGroup(repair) {
      repair = repair === true;

      var
        all_groups,
        active_group,
        active_group_length;

      all_groups = getAllGroups();
      active_group = articles_parent.find('.' + group_class + '.' + active_group_class);
      active_group_length = active_group.length;

      // if we don't have any active group, select first one
      if (!active_group_length) {
        all_groups.eq(0).addClass(active_group_class);
        if (repair && !in_repair) {
          in_repair = true;
          repairGroups();
        }
      }

      // if we have more than one active group, remove active class from all groups but first one
      if (active_group_length > 1) {
        active_group.not(active_group.first()).removeClass(active_group_class);
      }

      active_group = articles_parent.find('.' + group_class + '.' + active_group_class);
      return active_group;
    }

    function repairGroups() {
      var all_groups;
      all_groups = getAllGroups();
      articles.stop().fadeOut(animation_time, function() {
        all_groups.stop().fadeOut(animation_time);
      });
      showGroup();
      in_repair = false;
    }

    function resetClick() {
      clearTimeout(click_timeout);
      can_click = true;
    }

    // call slicer function to group each n article
    for (i = 0; i < group_length; i++) {
      slicer(i);
    }

    // show first group
    showGroup(false);

    var can_click = true;

    // show next group
    btn_next.on('click', function() {
      if (can_click) {
        can_click = false;
        showGroup('next');
      }
    });

    // show previous group
    btn_prev.on('click', function() {
      if (can_click) {
        can_click = false;
        showGroup('prev');
      }
    });

    // insert more article
    var counter = 1;
    btn_more.on('click', function() {
      for (var j = 0; j < 5; j++) {
        articles_parent.append($('<article/>').text('New article number ' + counter++));
      }
      updateSlicer();
    });
  });
})(jQuery);

#myList {
  min-height: 75px;
}

#myList article {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
}

#showLess {
  color: red;
  cursor: pointer;
}

#moreArticles {
  color: blue;
  cursor: pointer;
}

#loadMore:hover,
#showLess:hover,
#moreArticles:hover {
  color: black;
}

.each-group {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myList">
  <article>One</article>
  <article>Two</article>
  <article>Three</article>
  <article>Four</article>
  <article>Five</article>
  <article>Six</article>
  <article>Seven</article>
  <article>Eight</article>
  <article>Nine</article>
  <article>Ten</article>
  <article>Eleven</article>
  <article>Twelve</article>
  <article>Thirteen</article>
  <article>Fourteen</article>
  <article>Fifteen</article>
  <article>Sixteen</article>
  <article>Seventeen</article>
  <article>Eighteen</article>
  <article>Nineteen</article>
  <article>Twenty</article>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
<div id="moreArticles">Add more article</div>

隐藏所有文章并在我们单击下一步并预览时按 5 乘 5 显示它们

Hide all article and show them 5 by 5 when we click on next and preview

html

javascript

css

jquery

show-hide