Javascript 在while循环外部显示帖子描述

我有一个使用WP_查询类调用的团队成员列表（自定义帖子类型）。这部分工作正常，但是我试图在单击团队成员的名字时显示他们在while循环之外的描述（_content（））。正如您在代码中看到的，这个容器（#team info）在while循环之外。页面最好在单击名称后滚动到描述容器

您可以使用
jQuery
来尝试这一点。请参阅下面的代码

<div class="container mt-15">
    <div class="row">
        <div class="col-md-12">
        <?php
            // The Query
            $the_query = new WP_Query( array (
                'post_type' => 'my_team_sp',
            ) );

            if( $the_query->have_posts() ): $i = 0;
                while ( $the_query->have_posts() ) : $the_query->the_post(); $i++; ?>
                    <div class="col-md-4 <?php echo $i ;?>">
                        <a href="javascript:void(0)" class="team-name"><h4><?php the_title() ;?></h4></a>
                        <div style="display: none;"><?php the_content(); ?></div>
                    </div>
            <?php endwhile;
        else :
        endif;

        /* Restore original Post Data */
        wp_reset_postdata();
        ?>
    </div>
</div>

首先，您可以在while循环中使用display获取_content（）：none；之后，您可以使用jQuery在上面的部分中显示此内容。例如，如果用户单击特定的团队成员名称，他们的描述将显示在上面的部分中。
<div class="container mt-15">
<div class="row">
    <div class="col-md-12">
    <?php
        // The Query
        $the_query = new WP_Query( array (
            'post_type' => 'my_team_sp',
        ) );

        if( $the_query->have_posts() ): $i = 0;
            while ( $the_query->have_posts() ) : $the_query->the_post(); $i++; ?>
                 <div class="col-md-4 <?php echo $i ;?>">
                        <a href="#" id="team-name" onclick="myFunction()"><h4><?php the_title() ;?></h4></a>
                    </div>
            <?php endwhile;
        else :
        endif;


        /* Restore original Post Data */
        wp_reset_postdata();
        ?>
    </div>
</div>

<div class="container mt-15">
    <div class="row">
        <div class="col-md-12">
        <?php
            // The Query
            $the_query = new WP_Query( array (
                'post_type' => 'my_team_sp',
            ) );

            if( $the_query->have_posts() ): $i = 0;
                while ( $the_query->have_posts() ) : $the_query->the_post(); $i++; ?>
                    <div class="col-md-4 <?php echo $i ;?>">
                        <a href="javascript:void(0)" class="team-name"><h4><?php the_title() ;?></h4></a>
                        <div style="display: none;"><?php the_content(); ?></div>
                    </div>
            <?php endwhile;
        else :
        endif;

        /* Restore original Post Data */
        wp_reset_postdata();
        ?>
    </div>
</div>

jQuery(document).ready(function($){
    $( '.team-name' ).on('click', function(){
        var teamInfo = $(this).next().html();
        $( '#team-info' ).html( teamInfo );
    });
});