显示用户图片被点击时的用户描述
Showwordpress user description when user image is clicked
我正在一个现有的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"> </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();
});
}
显然php和javascript都有错误。在php中，您可以成功地检索所有用户，但只打印最后一个用户，您需要在循环中强制转换配置文件详细信息，但您还需要区分每个配置文件详细信息，以便它们不会同时出现。我们需要区分牌。因此，为了不破坏任何css，我为卡片添加了profile-id类和data-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"> </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();
});
}
告诉我怎么回事!
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"> </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();
});
}
相关文章：
- 从远程脚本获取用户IP
- 如何通过自己获得Chrome扩展的用户反馈/错误报告
- d3基于用户选择动态更新节点
- 同步调用，直到用户通过angular验证为访问者
- Brightcove获取/显示HTML中的当前视频标题和描述
- 使用javascript搜索具有用户输入的数组
- 如何使用jquery确定用户是否年满18岁
- Meteor-添加用户自定义字段的方法不起作用
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- 角度的项目列表 ng 重复，ng 单击显示全宽描述
- 跟踪用户点击Adsense广告的IP地址
- 使用javascript反复检查用户在facebook上的登录状态
- JsFiddle在分叉后描述失败
- 我想在AngularJS应用程序中创建一个输入数字框，用户不应该在该框上键入十进制数字.(一个整数输入框）
- 如何检查用户在html5视频播放器中观看了完整的视频
- 摩卡:将用户故事翻译成描述/它的规范(BDD框架，即摩卡）
- 显示用户图片被点击时的用户描述
- 如何按总数、待处理、完成、进行中、接受来显示用户描述/测试用例的数量
- 如何在用户在文本列表中键入单词时突出显示JSON字典中的单词，并在表单提交时用它们的描述替换它们
- 我正在使用 auth0 进行用户身份验证，并且我有一个用于 CRUD 帖子(标题、图像、描述）的 API.如何对 CRU
