加載更多按鈕使用jQuery

Question

我有3行4個圖像，每個都在它自己的div中。我想要在加載頁面時顯示前兩行，但在點擊「加載更多」按鈕時顯示第三行。 div的一排設置像這樣：

<div class="w3-content w3-container w3-padding-64"> 

//First row of images 
    <div class="w3-row-padding w3-center portfolioImgs"> 
    <div class="w3-col m3"> 
     <img src="images/projects/houston.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity""> 
    </div> 

    <div class="w3-col m3"> 
     <img src="images/projects/sugarland.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"> 
    </div> 

    <div class="w3-col m3"> 
     <img src="images/projects/stevenson.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"> 
    </div> 

    <div class="w3-col m3"> 
     <img src="images/projects/phoenix.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"> 
    </div> 
    </div> 
    . 
    . 
    . 
    //Second row of images 
    <div class="w3-row-padding w3-center portfolioImgs"> 
    . 
    . 
    . 
</div> 

//load more button 
<a href="#" id="loadmore" class="w3-row w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</a> 

我試圖用jQuery許多方法來加載上點擊的div的第3行，但不知道是否是因爲我試圖加載的div，而不是imgs直接？

Answer 1

很簡單，將一個類hidden添加到您想先隱藏的元素。

然後將點擊事件添加到按鈕，點擊後，找到所有具有類hidden的元素並切換它。 （第1點擊顯示，第2點擊隱藏）

$('#loadmore').on('click', function() { 
 
    console.log(); 
 
    $('.hidden').toggle(); 
 
})

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
 
<script src="https://www.w3schools.com/lib/w3.js"></script> 
 

 

 
<div class="w3-content w3-container w3-padding-64"> 
 

 
    <div class="w3-row-padding w3-center portfolioImgs"> 
 
    <div class="w3-col m3"> 
 
     <img src="images/projects/houston.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"> 
 
    </div> 
 
    <div class="w3-col m3"> 
 
     <img src="images/projects/sugarland.jpg" style="width:100% " onclick="onClick(this) " class="w3-hover-opacity "> 
 
    </div> 
 

 
    <div class="w3-col m3 "> 
 
     <img src="images/projects/stevenson.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity "> 
 
    </div> 
 

 
    <div class="w3-col m3 "> 
 
     <img src="images/projects/phoenix.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity "> 
 
    </div> 
 
    </div> 
 
    <div class="w3-row-padding w3-center portfolioImgs"> 
 
    <div class="w3-col m3"> 
 
     <img src="images/projects/houston.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"> 
 
    </div> 
 
    <div class="w3-col m3"> 
 
     <img src="images/projects/sugarland.jpg" style="width:100% " onclick="onClick(this) " class="w3-hover-opacity "> 
 
    </div> 
 

 
    <div class="w3-col m3 "> 
 
     <img src="images/projects/stevenson.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity "> 
 
    </div> 
 

 
    <div class="w3-col m3 "> 
 
     <img src="images/projects/phoenix.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity "> 
 
    </div> 
 
    </div> 
 

 
    <div class="w3-row-padding w3-center portfolioImgs hidden"> 
 
    <div class="w3-col m3"> 
 
     <img src="images/projects/houston.jpg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"> 
 
    </div> 
 
    <div class="w3-col m3"> 
 
     <img src="images/projects/sugarland.jpg" style="width:100% " onclick="onClick(this) " class="w3-hover-opacity "> 
 
    </div> 
 

 
    <div class="w3-col m3 "> 
 
     <img src="images/projects/stevenson.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity "> 
 
    </div> 
 

 
    <div class="w3-col m3 "> 
 
     <img src="images/projects/phoenix.jpg " style="width:100% " onclick="onClick(this) " class="w3-hover-opacity "> 
 
    </div> 
 
    </div> 
 

 
    <a href="#" id="loadmore" class="w3-row w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</a>

Answer 2

jQuery代碼，可以顯示你的第三排點擊按鈕時：

$("#loadmore").click(function(){ 
    $(".w3-row-padding:nth-child(3)").show(); 
}); 

這假定前兩行開始可見和隱藏的第三個開始，你可以在CSS做。