loadmoreで動作しない制限

Question

これはloadmore関数とその動作に使用したスクリプトであり、ここで直面している問題は、与えられた初期値と制限に従ってloadmoreを取得していないことです。 これは）私のスクリプト

<script type="text/javascript"> 
$(document).ready(function() { 

    size_div = $("#maincontent div").size(); 
    x=5; 
    $('#maincontent div:lt('+x+')').show(); 
    $('#loadMore').click(function() { 
     x= (x+3 <= size_div) ? x+3 : size_div; 
     $('#maincontent div:lt('+x+')').show(); 

     if(x == size_div){ 
     $('#loadMore').hide(); 
     $('#alert-msg').html('no more images to show!'); 
     } 
    }); 

}です。

ここでは、表示される最初の画像は5で、各loadmoreボタンをクリックすると3つの画像が表示されますが、ここでは画像が表示されるたびにloadmoreをクリックして表示されます。ハイテク男あなたの選択が間違っている

これが私の見解ページ

<div class="row" id="maincontent"> 

    <?php foreach($gallery as $row){?> 
    <?php $images=json_decode($row->image);{?> 

    <div class="col-md-3 col-sm-6"> 
     <div class="teacher-item"> 
     <div class="thumb-holder"> <img src="<?php echo base_url();?>uploads/<?php echo $images[0];?>" alt="" style="width: 250px;height: 180px;"> 
      <div class="hover-content"> 
      <a href="<?php echo base_url();?>uploads/<?php echo $images[0];?>" target="_blank" class="impromptu-gallery img-responsive"> 
       <h3>Gallery</h3> 
       <h4>Photoghaphy Master</h4> 
      </a> 
      </div> 
     </div> 
     </div> 
    </div> 

    <?php }}?> 

    </div> 

私のcssであるが、この

<style> 
#maincontent div { 
display:none; 
} 

#loadMore { 
color:green; 
cursor:pointer; 
} 
#loadMore:hover { 
color:black; 
} 
</style> 

Answer 1

のように見える、以下試してください。

size_div = $("#maincontent > div").size(); 
x=5; 
$('#maincontent > div:lt('+x+')').show(); 
$('#loadMore').click(function() { 
    x= (x+3 <= size_div) ? x+3 : size_div; 
    $('#maincontent > div:lt('+x+')').show(); 

    if(x == size_div){ 
    $('#loadMore').hide(); 
    $('#alert-msg').html('no more images to show!'); 
    } 
}); 

は、CSSで行きますスタイル：

#maincontent > div{display:none;}