当我们单击按钮在模型中显示post数据时,我们必须为特定模型目标提供带有数据属性的post id。
请在anchor tag和main div tag id中的数据目标中添加帖子id。
我已在此处修改了您的代码:
<div><?php echo wp_get_attachment_image($image_upload,$size = \'full\');?><br/>
<span class="name"><?php echo $title; ?></span><span class="jobtitle"><?php echo $jobtitle; ?></span>
<a onclick="return moreinfoModal(this);" id="<?php echo get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal-<?php echo get_the_ID();?>" href="javascript:void(0);" class="info">more info</a>
</div>
<div id="moreinfo-modal-<?php echo get_the_ID();?>" class= "moreinfo-modal" role="dialog">
<div class="teammember_div">
<a id="close-moreinfo" onclick=\'return closeMoreInfoModal();\' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg"></a>
<?php echo wp_get_attachment_image($image_upload,$size = \'full\');?>
<p><?php echo $title ?></p>
<p><?php echo $about ?></p>
<span class="jobtitle"><?php echo $jobtitle ?></span>
<span id="moreinfo" style="display: inherit;"></span>
<a id="modal-join" class="btn-cta" href="/sign-up/">Become a Member!</a>
</div>
</div>
<?php }?>
</div>
</div>
您还可以通过单击class而不是div ID attribute来更改js代码,如:
<script> function moreinfoModal(field) {
console.log(field.id);
$(\'.moreinfo-modal\').toggleClass(\'open\');
}
function closeMoreInfoModal() {
$(\'.moreinfo-modal\').toggleClass(\'open\');
}
$(document).on(\'click\', \'.close-pill\', function(e) {
$(this).parent().remove();
e.preventDefault();
});
</script>
希望这能解决您的问题。:)