限制不适用于 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 个，单击每个加载更多按钮时将显示 3 个图像，但这里最初显示的是单个图像，每次显示图像时单击加载更多。

这是我的浏览页面

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

限制不适用于 loadmore

limit not working on loadmore

javascript

php

codeigniter-3