我已经建立了一个循环来引入员工bios。当用户单击该员工的缩略图时，应显示一个弹出窗口，其中包含该“职位”的完整个人信息。我已经能够连接大多数内容，但当我点击个人简历时，弹出的内容总是来自上一篇文章。我假设这是因为脚本在循环之外。我无法想象将脚本放入循环中是一个好主意。抱歉，这里完全是新手。你能帮我理解我应该如何设置JS来显示每个帖子的正确信息吗？
这是我的循环代码：
<?php
$staff = new WP_Query(array(
\'posts_per_page\' => -1,
\'post_type\' => \'staff_bios\',
\'orderby\' => \'title\',
\'order\' => \'ASC\'
));
while($staff->have_posts()){
$staff->the_post(); ?>
//Below is what should display for each post.
<div class="staff-thumb" onclick="staffDetails()">
//Thumbnail details here
</div>
//Below is the pop up container (hidden until called).
<div id="<?php the_ID()?>" class="popup-wrap">
<div class="popup-content">
<span onclick="staffDetailsClose()" class="close">×</span>
<h4><?php the_title(); ?></h4>
//The rest of the bio details
</div>
</div>
<?php }
?>
//Here is the Javascript (outside the loop, for now).
<script>
function staffDetails() {
document.getElementById("<?php the_ID()?>").style.display = "block";
}
function staffDetailsClose() {
document.getElementById("<?php the_ID()?>").style.display = "none";
}
window.onclick = function(event) {
if(event.target == document.getElementById("<?php the_ID()?>")) {
document.getElementById("<?php the_ID()?>").style.display = "none";
}
}
</script>
我感谢您的帮助，包括参考其他文档。另外，由于我是新来的，如果你认为这个问题可以用不同的方式设置，或者你对我的问题有任何疑问，请告诉我。
最合适的回答,由SO网友:Qaisar Feroz 整理而成
This may help
<?php
$staff = new WP_Query(array(
\'posts_per_page\' => -1,
\'post_type\' => \'staff_bios\',
\'orderby\' => \'title\',
\'order\' => \'ASC\'
));
while($staff->have_posts()){
$staff->the_post(); ?>
//Below is what should display for each post.
<div class="staff-thumb" onclick="staffDetails(<?php the_ID(); ?>)">
//Thumbnail details here
</div>
//Below is the pop up container (hidden until called).
<div id="<?php the_ID()?>" class="popup-wrap">
<div class="popup-content">
<span onclick="staffDetailsClose(<?php the_ID(); ?>)" class="close">×</span>
<h4><?php the_title(); ?></h4>
//The rest of the bio details
</div>
</div>
<?php }
?>
//Here is the Javascript (outside the loop, for now).
<script>
modal = \'\';
function staffDetails( p_id ) {
modal = document.getElementById(p_id);
modal.style.display = "block";
}
function staffDetailsClose( p_id ) {
document.getElementById( p_id ).style.display = "none";
modal = \'\';
}
// based on https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_close
// When the user clicks anywhere outside of the modal, close it. NOT TESTED
window.onclick = function(event) {
if(event.target == modal) {
modal.style.display = "none";
}
}
</script>
