jQuery修改PHP foreach循环生成元素CSS仅单个生效如何解决

问题根因 #

HTML规范要求id属性全局唯一，同一页面内不能出现多个相同id的元素，浏览器解析时只会匹配第一个命中id的元素，因此你写的$("#hide")只能选中第一个被隐藏的div，自然只有单个元素生效。 #

修复步骤 #

1. 替换id选择器为类选择器（修改CSS） #

类属性支持重复绑定到多个元素，符合你的使用场景：

<style>
  .hide{
  display:none;
}
</style>

2. 修改PHP循环逻辑，给大于5的元素追加hide类 #

注意不要重复声明class属性，直接拼接类名即可，同时顺手修复你原有代码中$i = 0:的语法错误（把冒号改成半角分号）：

<?php 
  $i = 0;
  foreach($payemnts as $p){
    $i++;
    $class_str = $i > 5 ? 'row hide' : 'row';
?>
  <div class="<?php echo $class_str; ?>">
    <div class="col">
      <a href="<?php echo get_permalink($id); ?>">
        <img src="<?php echo get_the_post_thumbnail_url($id); ?>">
      </a>
    </div>
    <div class="col">

    </div>
    <div class="col">

    </div> 
  </div>  
<?php }  /* end foreach */?>
<div class="row">
   <button type="button" onclick="showAll()" class="btn btn-sm  ">READ MORE</button> 
</div>

3. 修改jQuery选择器，匹配所有hide类元素 #

推荐用removeClass的方式移除隐藏属性，比直接修改css样式扩展性更强：

<script>
    function showAll() { 
        // 方案1：直接修改样式
        // $(".hide").css({'display':'flex'});  
        // 方案2：移除隐藏类（更推荐）
        $(".hide").removeClass('hide');
    }
</script>

内容的提问来源于stack exchange，提问作者dcron