Mehr laden Button mit jQuery

Question

Ich habe 3 Reihen von 4 Bildern, jedes in einem eigenen Div. Ich möchte, dass die ersten zwei Zeilen beim Laden der Seite angezeigt werden, aber die dritte Zeile, die angezeigt wird, wenn Sie auf die Schaltfläche "Mehr laden" klicken. Eine Reihe von div-Tags eingerichtet ist wie so:

<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> 

Ich habe viele Methoden mit jQuery versucht, die 3. Reihe von div-Tags auf Klick zu laden, aber frage mich, ob es ist, weil ich versuche, die divs zu laden und nicht die img direkt?

Answer 1

Fügen Sie einfach eine Klasse hidden dem Element hinzu, das Sie zuerst ausblenden möchten.

dann fügen Sie das click-Ereignis der Schaltfläche hinzu, klicken Sie auf, finden Sie alle Elemente mit der Klasse hidden und schalten Sie sie um. (1. Klick zeigen, 2. Klick verstecken)

$('#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

Der Jquery-Code, der Ihnen die 3. Reihe zeigen kann, wenn die Schaltfläche ist:

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

Dies setzt voraus, dass die ersten beiden Reihen beginnen sichtbar und die dritte beginnt versteckt, die Sie in CSS tun können.