WordPress自定义文章类型中点击按钮动态展示对应图片的问题

嘿，我瞅了下你的代码，问题主要出在这几个地方：

• 你重复执行了两次WP_Query，完全没必要，既浪费资源又容易出问题
• 所有按钮和图片容器都用了相同的ID（比如uik、hidden_div），DOM里ID必须是唯一的，所以点击按钮时只会触发第一个元素的操作
• showHide函数没有针对性，没法区分是哪个按钮被点击，自然没法对应展示对应的图片

我给你改了代码，你看看：

<div class="row">
    <div class="col-lg-3">
        <div class="side-left-btn">
            <?php
            // WP_Query arguments
            $args = array(
                'post_type' => array( 'Exhibition' ),
            );
            // 只做一次查询就够了
            $exhibition = new WP_Query( $args );
            // The Loop
            if ( $exhibition->have_posts() ) {
                while ( $exhibition->have_posts() ) {
                    $exhibition->the_post();
                    $post_id = get_the_ID(); // 获取当前文章的唯一ID
                    ?>
                    <!-- 给按钮绑定带文章ID的点击事件 -->
                    <button class="btn btn-inner" onclick="showHide(<?php echo $post_id; ?>)">
                        <?php the_title(); ?>
                    </button>
                    <?php
                }
                wp_reset_postdata();
            }
            ?>
        </div>
    </div>
    <div class="col-lg-9">
        <?php
        // 复用之前的查询结果，不用重新查
        if ( $exhibition->have_posts() ) {
            while ( $exhibition->have_posts() ) {
                $exhibition->the_post();
                $post_id = get_the_ID();
                ?>
                <!-- 给每个图片容器设置唯一的ID，用文章ID区分 -->
                <div id="image-container-<?php echo $post_id; ?>" class="image-container" style="display:none;">
                    <?php
                    the_post_thumbnail( 'medium', array(
                        'class' => 'img-inner',
                    ) );
                    ?>
                </div>
                <?php
            }
            wp_reset_postdata();
        }
        ?>
    </div>
</div>

<script type="text/javascript">
function showHide(postId) {
    // 先隐藏所有图片容器
    const allContainers = document.querySelectorAll('.image-container');
    allContainers.forEach(container => {
        container.style.display = 'none';
    });
    // 再显示当前点击对应的容器
    const targetContainer = document.getElementById(`image-container-${postId}`);
    if (targetContainer) {
        targetContainer.style.display = 'block';
    }
}
</script>

我给你解释下改动点：

1. 复用查询结果：只执行一次WP_Query，两边循环都用这个结果，减少数据库请求
2. 唯一标识：用文章的ID给每个按钮和图片容器做唯一标记，这样点击时能精准找到对应的图片
3. 优化JS逻辑：点击按钮时先隐藏所有图片，再显示当前对应的，避免同时显示多张图片
4. 移除重复ID：把原来重复的ID换成动态生成的唯一ID，符合DOM规范

这样修改后，点击每个文章的按钮，就能准确显示对应的特色图片啦～

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