顯示更多按鈕在JavaScript或jquery中作爲分頁工作

Question

我的第一個網站的問題似乎是一個非常簡單和非常常見的問題，常常在互聯網上發佈，並稱爲「顯示更多」文本。但我真正想要的是完全不同的。 第一件事我有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> 

現在，這也是相當平易近人，但如果我們ha如何做到這一點有做到這一點在多個層面上？意味着我們有移動的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

，您可以給容器的div一個唯一的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> 

//等

然後，我們可以寫一個JavaScript函數來更改類包含div的，使我們能夠表現出來當我們點擊按鈕時。

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

請注意，你將不得不做更多的不是複製粘貼我的例子，但我希望你得到它背後的理念，並解決它。

Answer 2

這裏是爲您的方案工作的解決方案：我已經想通了自己 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 3

好球員，這裏是我做到了。 http://techbrush.org/show-more-text-to-work-as-pagination/但我相信有一個更好的更聰明，更乾淨的方法來做到這一點。如果你有，請發佈。謝謝。