jQueryを使用してボタンを追加

Question

私は4つの画像からなる3つの行をそれぞれ独自のdivに入れています。最初の2行をページの読み込みに表示したいが、3番目の行は[もっと読み込み]ボタンをクリックすると表示されます。 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> 

私は、クリックの上のdivの第三行をロードするためにjQueryを使って多くの方法を試してみましたが、私はdivをロードしようとしていないよので、それはだ場合には思ってましたimgsは直接ですか？

Answer 1

シンプルで、最初に非表示にする要素にクラスhiddenを追加します。

ボタンにクリックイベントを追加します。クリックすると、クラスhiddenのすべての要素が見つかり、切り替えます。 （第1回クリックショー、第二クリック非表示）

$('#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で行うことができ、最初の2つの行が見え始めると、第三開始が隠されていることを前提としています。