jquery $('.hide-show')slice(0,12).show() 没有正确显示 div？

Posted 2023-02-24

【中文标题】jquery $(\'.hide-show\')slice(0,12).show() 没有正确显示 div？

【英文标题】：jquery $('.hide-show')slice(0,12).show() is not showing div properly?jquery $('.hide-show')slice(0,12).show() 没有正确显示 div？

【发布时间】：2021-11-29 15:38:27

【问题描述】：

我在使用 jquery slice() 和 show() 方法显示数据以显示从 php 方法生成的动态 div 时遇到问题。代码如下：

<style>
.hide-show

 display :none;

</style>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>
<div class="col-sm-6 col-md-3 hide-show">
<!--- rest of the code-->


</div>

.
.
.
.
..
and so on 

<div class="mt2 text-center load-more-btn" ">
                    <a href="javascript:void(0);" class="btn btn-blank btn-sm-width"><?php echo lang('store load more'); ?></a>
                </div>

<script>
$('.hide-show').slice(0,12).show();
 $(".load-more-btn a").click(function () 
            
              $('.hide-show:hidden').slice(0,12).show();
             
             if($('.hide-show:hidden').length == 0 )
             
                 $(".load-more-btn a").fadeOut();
             
        );



</script>

在初始页面加载时，它没有显示它应该显示的前 12 个 div，但是在单击它从前 12 个 div 开始时，它可以完美地工作。谁能帮我解决这个问题，抱歉我写得不好。

【参考方案1】：

将它放在 document.ready 上应该可以解决问题

$(document).ready(function()
  $('.hide-show').slice(0,12).show();
);

https://jsfiddle.net/gxjm6p9e/