js popup仅从第一个帖子加载内容而不是单个帖子

Question

我有自定义帖子类型＆＃34;成员＆＃34;，它们将自己的详细信息存储在custom-post-meta中。我目前正在使用名为＆＃34; archive-members.php＆＃34;的自定义后期类型存档页面。其中列出了所有这些成员及其详细信息。

现在，我需要将与每个成员相关的元数据显示为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; ?>

在这里，正在发生的事情是，每当我点击时，我都会获得相同的帐号（这是元键的元值＆＃34; account_number＆＃34;循环中的第一个帖子） ＆＃34;点击播放＆＃34;任何这些帖子的链接。我想弹出窗口不会根据个人帖子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，相关成员按钮将仅定位弹出窗口