如何在WordPress循环中将Fancybox与含描述的div正确关联？

问题根源 #

你当前代码的核心问题是所有团队成员的弹窗div使用了同一个ID（#link），HTML中ID必须唯一，循环生成时重复ID会导致Fancybox无法区分对应关系，要么打开同一个弹窗，要么找不到正确元素。另外，div的ID属性不应该带#符号，#是CSS选择器的标识，ID本身只需写名称。

修改后的代码 #

<?php $loop = new WP_Query( array( 'post_type' => 'thegem_team_person', 'posts_per_page' => -1, 'category' => 'current' ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); 
// 生成唯一弹窗ID，用文章ID保证唯一性
$modal_id = 'team-modal-' . get_the_ID();
?>
<div class="col-lg-4 col-md-4">
    <a class="fancybox" href="#<?php echo $modal_id; ?>">
        <img src="<?php echo $picturedy;?>">
        <h3 style="padding-top: 20px; text-decoration: none; color: #333;"><?php the_title();?></h3>
        <p style="color: #11a9d4; padding-bottom: 10px; text-decoration: none;"><?php the_title();?></p>
    </a>
    <!-- 弹窗内容，使用唯一ID -->
    <div id="<?php echo $modal_id; ?>" style="display: none;">
        <h3 style="padding-top: 20px; color: #333;"><?php the_title();?></h3>
        <?php $dscp = get_field('description'); echo $dscp;?>
    </div>
</div>                    
<?php endwhile; wp_reset_query(); ?>

关键修改点 #

• 用get_the_ID()生成唯一弹窗ID：每个团队成员对应的文章ID是唯一的，以此拼接成team-modal-XXX格式的ID，确保每个弹窗唯一。
• 修正ID格式：弹窗div的ID属性不再带#，仅在a标签的href中用#指向该ID。
• 隐藏弹窗内容：添加display: none;确保弹窗默认不显示，由Fancybox控制显示逻辑。

Fancybox初始化补充 #

确保页面中正确初始化Fancybox（未添加则补充）：

jQuery(document).ready(function($) {
    $('.fancybox').fancybox({
        type: 'inline', // 指定为内联内容类型
        autoSize: true
    });
});

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