加载更多按钮使用jQuery

问题描述：

我有3行4个图像，每个都在它自己的div中。我想要在加载页面时显示前两行，但在点击“加载更多”按钮时显示第三行。 div的一排设置像这样：加载更多按钮使用jQuery

<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直接？

1日IMG'类= “W3-悬停不透明度”， “>'你有双'”' –

答

很简单，将一个类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>

答

jQuery代码，可以显示你的第三排点击按钮时：

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

这假定前两行开始可见和隐藏的第三个开始，你可以在CSS做。

加载更多按钮使用jQuery

相关推荐