显示更多按钮在JavaScript或jQuery中作为分页工作

Question

我在第一个站点上的问题似乎很简单且非常普遍，通常在Internet上发布，被称为"显示更多"文本。但是我真正想要的是完全不同的。第一件事我的HTML元素具有嵌套元素，而不是纯文本。其次，我不想一次知道所有其余的隐藏元素，而是在3个元素或4个元素左右的块中考虑以下示例

<div class = "outer" >
  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>
  ------above elements to show by default when page loads------
  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

-------这三个点击"显示更多" -------

  <div class="child" > one </div>
  <div class="child" > one </div>
  <div class="child" > one </div>

-------再次单击"显示更多"时，这三个再次-------

  and so on until all the elements are not finished.
</div>

现在，这也很平易近人，但是如果我们必须在多个级别上进行操作，该怎么办？意味着我们已经使用外部DIV移动Div

<div class = "outer" >
      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"
</div>
    <div class = "outer" >
      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"
</div>
    <div class = "outer" >
      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"
</div>

Answer 1

这是您方案的工作解决方案：http://jsfiddle.net/4c3am/

var itemsCount = 0,
itemsMax = $('.outer div').length;
$('.outer div').hide();
function showNextItems() {
    var pagination = 3;
    for (var i = itemsCount; i < (itemsCount + pagination); i++) {
        $('.outer div:eq(' + i + ')').show();
    }
    itemsCount += pagination;
    if (itemsCount > itemsMax) {
        $('#showMore').hide();
    }
};
showNextItems();
$('#showMore').on('click', function (e) {
    e.preventDefault();
    showNextItems();
});

Answer 2

您可以给容器Divs一个唯一的ID，因此您可以使用JavaScript拾取它，使用JavaScript，您可以将CSS类应用于元素。以下CSS示例首先隐藏元素。

CSS：

.outervisible{display:block;}
.outerhidden{display:none;}

html：

<div id = "outer1" >
      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>....<button onClick="showsomething('outer2')">show more</button> 
</div>
    <div id = "outer2" class="outerhidden" >
      <div class="child" > one </div>
      <div class="child" > one </div>
      <div class="child" > one </div>...."show more"
</div>

//etc

然后，我们可以编写一个JavaScript函数以更改contingdiv的类，从而使我们在单击按钮时显示它。

<script>
function showsomething(pageid){
    document.getElementById(pageid).className = "outervisible";
}
</script>

请注意，除了复制我的榜样外，您还必须做更多的事情，但我希望您能得到它的想法并解决。

Answer 3

好的，我自己想知道，这就是我的做法。http://techbrush.org/show-more-text-to-work-as-pagination/，但我敢肯定，这样做有更好，更清洁的方法可以做到这一点。如果有的话，请发布。谢谢。