基于PHP循环生成多卡片的对应悬停弹出框Javascript实现求助

第一步：修复PHP循环结构 #

当前你的弹窗代码写在while循环外部，只会生成1个弹窗，需要移到循环内部，才能生成和卡片一一对应的多个弹窗，修正后的PHP代码如下：

<?php 
$counter = 1; // 提前初始化计数器
while ($post_query->have_posts()) {?>
   <?php $post_query->the_post();?>
   <div class="card" id="card-0<?php echo $counter; ?>">
      <h4 class="post-title">“<?php echo get_the_title(); ?>”</h4>
   </div>

   <div class="popup" id="popup-0<?php echo $counter++; ?>">
      <h4 class="post-title">“<?php echo get_the_title(); ?>”</h4>
      <p class="blurb"><?php echo get_field('blurb'); ?></p>
   </div>
<?php }?>

第二步：通用JS hover逻辑实现 #

不需要提前知道卡片/弹窗的数量，自动匹配所有动态生成的元素，代码如下：

$(document).ready(function(){
  // 给所有class为card的元素批量绑定hover事件
  $(".card").hover(function(){
    // 提取当前卡片id，替换前缀得到对应弹窗的id
    const targetPopupId = '#' + $(this).attr('id').replace('card', 'popup');
    $(targetPopupId).css("opacity", "1");
  }, function(){
    const targetPopupId = '#' + $(this).attr('id').replace('card', 'popup');
    $(targetPopupId).css("opacity", "0");
  });
});

可选优化方案（更稳定） #

如果担心后续id命名规则变动导致匹配失效，可以通过data属性做显式绑定，修改PHP中卡片的代码，新增自定义属性：

<div class="card" id="card-0<?php echo $counter; ?>" data-popup-target="popup-0<?php echo $counter; ?>">

对应的JS代码可以改为直接读取绑定的属性值，无需依赖id前缀规则：

$(document).ready(function(){
  $(".card").hover(function(){
    const targetPopup = '#' + $(this).data('popup-target');
    $(targetPopup).css("opacity", "1");
  }, function(){
    const targetPopup = '#' + $(this).data('popup-target');
    $(targetPopup).css("opacity", "0");
  });
});

如果需要弹窗显示/隐藏有过渡效果，可以补充CSS样式：

.popup {
  transition: opacity 0.2s ease;
  /* 保留原有popup的其他样式即可 */
}

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