如何在jQuery中引用动态ID元素实现WordPress Lightbox弹窗

我明白你的问题了——你已经成功给元素加上了带编号的动态ID，但原来的JS代码还在找旧的固定ID，而且没有把每个弹窗按钮和对应的gallery一对一绑定起来。下面给你两种解决方案，优先推荐第一种，更健壮灵活：

方案一：利用DOM结构的相对关系（推荐，无需依赖ID） #

这种方法不需要依赖编号ID，而是通过元素在DOM中的位置关系来找到对应的gallery，代码更简洁，也不容易出错。

修改后的jQuery代码 #

jQuery(document).ready(function () {
    // 给每个图片绑定点击事件
    $(".card_image img").click(function(event) {
        // 找到当前图片所在的cards_item的下一个兄弟元素（就是对应的gallery容器）
        var targetGallery = $(this).closest(".cards_item").next("#gallery");
        // 触发gallery里第一个a标签的点击
        targetGallery.find(".gallery-item a").first().click();
    });
});

为什么这个方案更好？ #

• 不用再手动修改ID，完全依赖DOM结构的关联性，即使后续HTML结构微调（只要cards_item和对应的gallery还是相邻的），代码依然有效
• 避免了编号ID可能带来的冲突或计数错误问题

方案二：基于动态编号ID绑定（如果你坚持要用ID的话） #

如果你还是想用你生成的带编号ID，那需要在循环生成ID的时候，就给每个图片绑定对应的gallery点击事件：

修改后的jQuery代码 #

jQuery(document).ready(function () {
    // 给图片添加带编号的ID，并绑定对应的点击事件
    $(".card_image img").each(function(index) {
        var currentNum = index + 1;
        $(this).attr("id", "gallery-popup-" + currentNum);
        
        // 直接在这里绑定点击事件，关联对应的gallery
        $(this).click(function() {
            $("#gallery-" + currentNum).find(".gallery-item a").first().click();
        });
    });
    
    // 给gallery容器添加带编号的ID
    $(".cards > div").each(function(index) {
        $(this).attr("id", "gallery-" + (index + 1));
    });
});

原来代码的问题分析 #

1. 选择器错误：你用$("#gallery-popup")查找元素，但已经把ID改成了gallery-popup-1、gallery-popup-2，这个选择器找不到任何元素
2. 未一对一绑定：你试图用全局的btnPhotos和galleryItems变量，但每个按钮对应不同的gallery，不能用全局变量统一处理
3. 计数变量问题：原来的each循环里的n变量作用域有问题，直接用index参数更稳妥

额外优化：修改WordPress模板，直接生成关联标识 #

其实你可以在WordPress模板里直接给元素添加关联标识，不用再用jQuery修改ID，这样更高效：

修改后的WordPress模板代码 #

<?php 
$postIndex = 0;
while ( have_posts() ) : the_post(); 
$postIndex++;
?>
<li class="cards_item">
    <div class="card">
        <div class="card_image">
            <?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ); ?>
            <img src="<?php echo $url ?>" data-gallery-target="#gallery-<?php echo $postIndex; ?>"/>
        </div>
        <div class="card_content">
            <h3 class="card_heading"><?php the_title();?></h3>
        </div>
    </div>
</li>
<?php $images = get_field('gallery_images'); if( $images ): ?>
<div id="gallery-<?php echo $postIndex; ?>">
    <ul>
        <?php foreach( $images as $image ):
            $content = '<li class="gallery-item">';
            $content .= '<a href="'. $image['url'] .'">';
            $content .= '<img src="'. $image['sizes']['full'] .'" alt="'. $image['alt'] .'" />';
            $content .= '</a>';
            $content .= '</li>';
            if ( function_exists('slb_activate') ){
                $content = slb_activate($content);
            }
            echo $content;?>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>
<?php endwhile; // End of the loop. ?>

然后对应的jQuery代码可以更简洁：

jQuery(document).ready(function () {
    $(".card_image img").click(function(event) {
        var targetGallery = $(this).data("gallery-target");
        $(targetGallery).find(".gallery-item a").first().click();
    });
});

这样从模板层面就建立了图片和gallery的关联，JS代码更清晰，也减少了前端DOM操作的开销。

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