我试图制作一个页面，查询特定类别（“景点”）的每一篇帖子。
我已经能够成功地获得帖子，我只需要让modals工作。
我在我的循环中做了一个按钮，它的标题是循环所在的任何帖子。我希望这样，每当人们单击该按钮时，它就会打开一个模式，显示代码中ACF I列表中的所有字段。
不过，我有一些问题。由于某种原因，我无法让javascript正常工作。现在都在页面模板文件中，但我已经尝试通过函数将脚本排队。php等。
我的猜测是，我正在尝试制作文档。getElementsByClassName而不是documents。getElementById。我想使用id，但由于循环是创建按钮的原因，我不知道如何使id唯一。我在考虑将id作为循环的计数器之类的东西，然后将其存储在一个变量中，我可以在脚本中引用它，这样我就可以执行getElementsById（$someVariable）
感谢您的关注！
<?php
get_header();
$args = array(
\'post_type\' => \'post\',
\'post_status\' => \'publish\',
\'category_name\' => \'attractions\',
\'posts_per_page\' => 10,
);
$arr_posts = new WP_Query( $args );
if ( $arr_posts->have_posts() ) :
while ( $arr_posts->have_posts() ) :
$arr_posts->the_post();
get_posts($args);
//vars below
?>
<div class=attractions-wrap>
<button class="openAttractions"><?php the_title(); ?></button>
</div>
<div class="attractionsModal">
<div class=modal-content>
<span class="close">×</span>
<h2><?php the_title(); ?></h2>
<div id="attraction-descrption" class="description">
<h3>Description</h2>
<p><?php the_field(\'description_field\'); ?></p>
</div>
<div id="attraction-opening-hours" class="opening-hours">
<h3>Opening Hours</h2>
<p><?php the_field(\'opening_hours_field\'); ?></p>
</div>
<div id="attraction-practical-information" class="practical-information">
<h3>Practical Information</h2>
<p><?php the_field(\'practical_information_field\'); ?></p>
</div>
</div>
</div>
<?php
endwhile;
endif;
?>
<script type="text/javascript">
// Get the modal
var modal = document.getElementsByClassName(\'attractionsModal\');
// Get the button that opens the modal
var btn = document.getElementsByClassName("openAttractions");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>