单击用户图像时的Showwordpress用户说明

Question

我正在开发一个现有的wordpress网站。我正在更新一个显示可点击图像中用户的页面。单击图像时，下拉框应显示用户名称和描述。我遇到的问题是，下拉框仅显示页面上最后一个用户的名称和描述。下拉列表中的信息与单击的图像不匹配。非常感谢任何帮助！

这是HTML / PHP：

<section class="series">
        <div class="container-fluid">
            <?php //query for hosts/contributor users
            $cq = new WP_User_Query(array('role'=>'contributor'));

            // User Loop
            if(!empty($cq->results))
            {
                //sort users into current and past by meta field//
                $hosts = $cq->results;
                $current_hosts = array();

                foreach($hosts as $user)
                {
                    $user->sort_num = get_field('order', "user_$user->ID");

                    if(tv_is_host_active($user->ID))
                        $current_hosts[] = $user;
                    else
                        $past_hosts[] = $user;

                }
                usort($current_hosts, 'tv_compare_hosts');


                //display the current hosts
                $row_counter = 0;
                foreach ( $current_hosts as $user )
                {
                    //add rows of four
                    if($row_counter++ % 4 == 0)
                    {
                        echo "<div class='row'\n>";
                    } ?>

                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <a class="card card-cast" href="javascript:void(0)">
                            <div class="card-img-cast">
                                <?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
                                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"  />
                                <?php else: ?>
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
                                <?php endif;?>
                            </div>
                            <div class="card-content">
                                <div class="card-title"><?php echo $user->data->display_name; ?></div>
                            </div>
                        </a>
                    </div>
                    <?php
                //add rows of 4
                    if($row_counter % 4 == 0)
                    {
                        echo "</div><!-- end row-->\n";
                    }

            } //end foreach of current hosts


            //cap row if the last row was not full
            if(!($row_counter % 4 == 0))
            {
                echo "</div><!-- end/cap row-->\n";
            }
            ?>

            <?php
        } else { ?>

            <div class="col-xs-12 col-sm-4 host">
                <p>No hosts found.</p>
            </div>
            <div class="clearfix visible-xs">&nbsp;</div>
            <?php
        }

        ?>
            <?php endwhile;
            endif; //end main loop ?>
        <!-- cast profile dropdown -->
        <div class="container-fluid profile-details hidden">
        <i class="fa fa-times closeBox" aria-hidden="true"></i>
        <h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
        <p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
        <p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
        <div class="row">
            <div class="col-xs-12">
                <ul class="list-inline social">
                    <?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
                        <li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
                    <?php endif;
                    if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
                    <li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
                    <?php endif;
                    if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
                    <li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
                    <?php endif;
                    if(get_field('website', "user_".$user->ID)): ?>
                    <li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
                    <?php endif; ?>
                </ul>
            </div>
        </div><!-- end social link row -->
        </div><!-- end dropdown --> 
        </div><!--end container-->
    </section>

</main><!--end .main-bg -->
<script>
    jQuery(document).ready(function() {
        initHostsPage();
    });
</script>

<?php

get_footer(); ?>

和jquery函数显示下拉框：

function initHostsPage() {
    $('.social').each(function(key, val){
        $(this).children('li').children('a').tooltip();
    });

        //dropdown profile box
    $('.card').click(function() {
        var row = $(this).closest('.row');
        var profileDetails = $('.profile-details');
        profileDetails.removeClass('hidden');
        row.append(profileDetails);

        if((profileDetails).is(':hidden')) {
            profileDetails.slideTogle('slow');
        }

        else{
            profileDetails.hide();
        } 
    });

    $(".closeBox").click(function() {
        $(this).parent().hide();
    });
}

Answer 1

好吧显然有php和javascript错误。在php中你成功地检索了所有用户，但只打印了最后一个用户，你需要在循环内部转换配置文件细节，但你还需要区分每个配置文件细节，以便它们不会同时出现。我们需要区分卡片。所以为了不打破任何CSS我添加了profile-id类和卡的数据ID

<section class="series">
        <div class="container-fluid">
            <?php //query for hosts/contributor users
            $cq = new WP_User_Query(array('role'=>'contributor'));

            // User Loop
            if(!empty($cq->results))
            {
                //sort users into current and past by meta field//
                $hosts = $cq->results;
                $current_hosts = array();

                foreach($hosts as $user)
                {
                    $user->sort_num = get_field('order', "user_$user->ID");

                    if(tv_is_host_active($user->ID))
                        $current_hosts[] = $user;
                    else
                        $past_hosts[] = $user;

                }
                usort($current_hosts, 'tv_compare_hosts');


                //display the current hosts
                $row_counter = 0;
                foreach ( $current_hosts as $user )
                {
                    //add rows of four
                    if($row_counter++ % 4 == 0)
                    {
                        echo "<div class='row'\n>";
                    } ?>

                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
                            <div class="card-img-cast">
                                <?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
                                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"  />
                                <?php else: ?>
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
                                <?php endif;?>
                            </div>
                            <div class="card-content">
                                <div class="card-title"><?php echo $user->data->display_name; ?></div>
                            </div>
                        </a>
                    </div>
                    <?php
                //add rows of 4
                    if($row_counter % 4 == 0)
                    {
                        echo "</div><!-- end row-->\n";
                    }

            } //end foreach of current hosts


            //cap row if the last row was not full
            if(!($row_counter % 4 == 0))
            {
                echo "</div><!-- end/cap row-->\n";
            }
            ?>
             <!-- cast profile dropdown -->
        <div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
        <i class="fa fa-times closeBox" aria-hidden="true"></i>
        <h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
        <p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
        <p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
        <div class="row">
            <div class="col-xs-12">
                <ul class="list-inline social">
                    <?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
                        <li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
                    <?php endif;
                    if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
                    <li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
                    <?php endif;
                    if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
                    <li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
                    <?php endif;
                    if(get_field('website', "user_".$user->ID)): ?>
                    <li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
                    <?php endif; ?>
                </ul>
            </div>
        </div><!-- end social link row -->
        </div><!-- end dropdown --> 
        </div><!--end container-->
            <?php
        } else { ?>

            <div class="col-xs-12 col-sm-4 host">
                <p>No hosts found.</p>
            </div>
            <div class="clearfix visible-xs">&nbsp;</div>
            <?php
        }

        ?>
            <?php endwhile;
            endif; //end main loop ?>

    </section>

</main><!--end .main-bg -->
<script>
    jQuery(document).ready(function() {
        initHostsPage();
    });
</script>

<?php

get_footer(); ?>

现在设置Html让我们看看javascript。它正在选择任何卡并检索唯一的配置文件。现在它将选择任何卡，获取其ID并检索该ID配置文件：

function initHostsPage() {
    $('.social').each(function(key, val){
        $(this).children('li').children('a').tooltip();
    });

        //dropdown profile box
    $('.card').click(function() {
        var row = $(this).closest('.row');
        var id = $(this).data('id'); //We get the card
        var profileDetails = $('.profile-' + id); //We get the exact profile
        profileDetails.removeClass('hidden');
        row.append(profileDetails);

        if((profileDetails).is(':hidden')) {
            profileDetails.slideTogle('slow');
        }

        else{
            profileDetails.hide();
        } 
    });

    $(".closeBox").click(function() {
        $(this).parent().hide();
    });
}

告诉我它是怎么回事！

Answer 2

HTML / PHP：

<section class="series">
        <div class="container-fluid">
            <?php //query for hosts/contributor users
            $cq = new WP_User_Query(array('role'=>'contributor'));

            // User Loop
            if(!empty($cq->results))
            {
                //sort users into current and past by meta field//
                $hosts = $cq->results;
                $current_hosts = array();

                foreach($hosts as $user)
                {
                    $user->sort_num = get_field('order', "user_$user->ID");

                    if(tv_is_host_active($user->ID))
                        $current_hosts[] = $user;
                    else
                        $past_hosts[] = $user;

                }
                usort($current_hosts, 'tv_compare_hosts');


                //display the current hosts
                $row_counter = 0;
                foreach ( $current_hosts as $user )
                {
                    //add rows of four
                    if($row_counter++ % 4 == 0)
                    { 
                        echo "<div class='row'\n>";
                    } ?>

                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                        <a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
                            <div class="card-img-cast">
                                <?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
                                <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"  />
                                <?php else: ?>
                                <img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
                                <?php endif;?>
                            </div>
                            <div class="card-content">
                                <div class="card-title"><?php echo $user->data->display_name; ?></div>
                            </div> 
                        </a> 
                    </div> 

                    <!-- cast profile dropdown -->
                    <div class="profile-details profile-<?php echo $user->ID;?> hidden">
                        <i class="fa fa-times closeBox" aria-hidden="true"></i>
                        <h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
                        <p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
                        <p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
                        <div class="row">
                            <div class="col-xs-12">
                                <ul class="list-inline social">
                                    <?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
                                        <li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
                                    <?php endif;
                                    if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
                                    <li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
                                    <?php endif;
                                    if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
                                    <li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
                                    <?php endif;
                                    if(get_field('website', "user_".$user->ID)): ?>
                                    <li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
                                    <?php endif; ?>
                                </ul>
                            </div>
                        </div><!-- end social link row -->
                    </div><!-- end dropdown --> 

                    <?php
                //add rows of 4
                    if($row_counter % 4 == 0)
                    {
                        echo "</div><!-- end row-->\n";
                    }
            } //end foreach of current hosts?>

        </div><!-- end Container -->

            <?php
                } else { ?>

                    <div class="col-xs-12 col-sm-4 host">
                        <p>No hosts found.</p>
                    </div>
                    <div class="clearfix visible-xs">&nbsp;</div>
                <?php
                }

                ?>
            <?php endwhile;
            endif; //end main loop ?>

    </section>

</main><!--end .main-bg -->
<script>
    jQuery(document).ready(function() {
        initHostsPage();
    });
</script>

<?php

get_footer(); ?>

和Javascript：

function initHostsPage() {
    $('.social').each(function(key, val){
        $(this).children('li').children('a').tooltip();
    });

        //dropdown profile box
    $('.card-cast').click(function() {
        var row = $(this).closest('.row');
        var id = $(this).data('id'); //get the card
        var profileDetails = $('.profile-' + id); //get the exact profile
        profileDetails.removeClass('hidden');
        row.append(profileDetails);

        if((profileDetails).is(':hidden')) {
            profileDetails.slideToggle('slow');
        }

        else{
            profileDetails.hide();
        } 
    }); 

    $(".closeBox").click(function() {
        $(this).parent().hide();
    });
}