这是我的模式代码。第一个代码显示每个职位ID的图像、职务和名称。
当用户单击“更多信息”链接时，应该会打开一个按钮，其中包含有关帖子的更多信息，但它会打开所有帖子模态。有没有什么方法可以让我只打开与modal相同的post 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 }?>
抱歉，添加了以下脚本
<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>
最合适的回答,由SO网友:ngearing 整理而成
因此，您的脚本正按照您的指示执行。
在这里，您将元素传递给函数，但从未使用它，而是使用一个类查询所有元素并添加另一个类。
function moreinfoModal(field) {
console.log(field.id);
$(\'.moreinfo-modal\').toggleClass(\'open\');
}
您应该做的只是将类添加到buttin所针对的元素中：
function moreinfoModal(field) {
// Get the button target.
var target = field.getAttribute(\'data-target\')
// Add class to target.
$(target).addClass(\'open\');
}
以及何时需要关闭模型窗口。您可以只查找打开的模型。因为您没有传入元素以从中获取id。
function closeMoreInfoModal() {
// Close all windows because you we dont have the open elements id.
$(\'.moreinfo-modal.open\').removeClass(\'open\');
}
