js 弹出窗口仅从第一个帖子加载内容，而不是单个帖子答案

【问题标题】：js popup loads content from first post only instead of individual postsjs 弹出窗口仅从第一个帖子加载内容，而不是单个帖子
【发布时间】：2015-06-10 06:22:04
【问题描述】：

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

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

我可以在弹出框中显示 post-meta-values，但问题是它只显示第一个帖子的自定义字段值。我期望它应该加载每个帖子的单独自定义字段值，因为它们都有不同的值。

这是一个简化的 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。无论如何，如果需要会及时提供。

【问题讨论】：

能否提供网址
@sarath 我在本地机器-wampserver 中执行此操作。

标签： javascript wordpress custom-post-type

【解决方案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，并且相关的成员按钮将仅针对所述弹出框

【讨论】：