javascript - js 弹出窗口仅加载第一篇文章的内容，而不是单个文章

Question

我有自定义帖子类型“成员”，它将其详细信息存储在自定义帖子元中。我目前正在其名为“archive-members.php”的自定义帖子类型存档页面中工作，该页面列出了所有这些成员及其详细信息。

现在，我需要将与每个成员相关的元数据显示到 simple js popup-box 中。 ，所以我使用了下面的代码，现在每个帖子都有一个链接，单击时会打开一个弹出框。

我能够在弹出框中显示帖子元值，但问题是它仅显示第一篇帖子的自定义字段值。我期望的是它应该加载每个帖子的单独自定义字段值，因为它们都有不同的值。

这是一个简化的 PHP

<?php get_header();?>
 <h1><?php echo post_type_archive_title(); ?></h1>

 <?php if(have_posts()) : while(have_posts()) : the_post();?>
             <?php if(has_post_thumbnail()) { .......... }?>
             <?php echo get_post_meta(............);?>

    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">CLICK TO POPUP</a>
    <div id="light" class="white_content">
         <div class="close-button"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a></div>
               <?php echo get_post_meta($post->ID, "account_number", true);?>
        </div>
                <div id="fade" class="black_overlay"></div>
<?php endwhile; endif; ?>

在这里，每当我点击“CLICK TO POPUP”时，我都会得到相同的帐号(这是循环中第一篇文章的元键“account_number”的元值)任何这些帖子的链接。我猜想弹出窗口不会根据各个帖子 ID 加载内容。循环中的错误是什么？

注意:我正在使用basic java-script for the popup而且效果很好。我认为没有必要在这里提供它的 css 。无论如何，如果需要的话会及时提供。

Answer 1

发生这种情况是因为您正在为每个成员创建一个弹出窗口，但他们都具有相同的 ID。这是不正确的语法，因此 JavaScript 的行为不会如您所期望的那样。 (如果您希望 ID 对于所有样式或其他脚本重复出现，请使用类)。

试试这个:

<?php get_header();?>
<h1><?php echo post_type_archive_title(); ?></h1>
<?php if(have_posts()) : $i = 0; while(have_posts()) : the_post();?>
    <?php if(has_post_thumbnail()) { .......... }?>
    <?php echo get_post_meta(............);?>
    <a href = "javascript:void(0)" onclick = "document.getElementById('light-<?php echo $i;?>').style.display='block';document.getElementById('fade').style.display='block'">CLICK TO POPUP</a>
    <div id="light-<?php echo $i;?>" class="white_content">
        <div class="close-button"><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a></div>
        <?php echo get_post_meta($post->ID, "account_number", true);?> </div>
    <div id="fade" class="black_overlay"></div>
    <?php $i++; ?>
<?php endwhile; endif; ?>

这将为每个弹出框提供一个唯一的 ID，并且相关的成员按钮将仅针对所述弹出框