Wordpress jQuery工具仅覆盖打开的1个元素

因此，我遇到了一个问题，在Wordpress中有一个页面查询自定义帖子类型。它把名字和特色图片拉进来。当你点击特色图片时，它会打开一个包含内容和一些其他信息的弹出窗口。以下是链接：

这是my page.php文件中的调用：

            <?php
          query_posts(array('post_type' => 'doctors'));
          if ( have_posts() ) : while ( have_posts() ) : the_post();
        ?>

            <aside class="doctor">

                <span class="photo">
                    <?php the_post_thumbnail('full', array('data-rel' => "#$post->ID")); ?>
                </span>

                <ul>
                    <li><?php if(get_field('linkedin')) { echo '<span><a class="linkedin" target="_blank" href='. get_field('linkedin') .'>' . get_field('linkedin') . '</a></span>'; } ?></li>
                    <li><a title="<?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?>"><?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?></a></li>
                    <li><?php if(get_field('email_address')) { echo '<span class="email">' . get_field('email_address') . '</span>'; } ?></li>
                    <li><a title="<?php echo get_field('phone'); ?>"><?php if(get_field('phone')) { echo '<span class="phone">' . get_field('phone') . '</span>'; } ?></a></li>
                </ul>

                <p class="title"><?php the_title(''); ?> <?php if(get_field('location')) { echo '<span>' . get_field('location') . '</span>'; } ?></p>

                <article class="simple_overlay" id="<?php the_id(); ?>">

                    <?php the_post_thumbnail('full'); ?>

                    <ul>
                        <li><?php if(get_field('linkedin')) { echo '<span><a class="linkedin" target="_blank" href='. get_field('linkedin') .'>' . get_field('linkedin') . '</a></span>'; } ?></li>
                        <li><a title="<?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?>"><?php $values = get_field('type_of_doctor'); if($values) { foreach($values as $value) { echo '<span class='. $value .'>' . $value . '</span>'; } }?></a></li>
                        <li><?php if(get_field('email_address')) { echo '<span class="email">' . get_field('email_address') . '</span>'; } ?></li>
                        <li><a title="<?php echo get_field('phone'); ?>"><?php if(get_field('phone')) { echo '<span class="phone">' . get_field('phone') . '</span>'; } ?></a></li>
                    </ul>

                    <p class="title"><?php the_title(''); ?> <?php if(get_field('location')) { echo '<span>' . get_field('location') . '</span>'; } ?></p>

                    <div class="clear"></div>

                    <hr>

                    <p><?php the_content(); ?></p>

                </article><!--end of .simple_overlay-->

            </aside><!--end of .doctor-->

        <?php endwhile; endif; wp_reset_query(); ?>

脚本处于半工作状态，当我单击图片时，它会弹出打开信息，但如果我单击第二张图片，它也会弹出打开第一个项目信息。它们都使用post ID在data rel标记上生成唯一ID，并且覆盖文章类具有匹配的ID。

---

来源：

解决了这个问题。任何可能无意中发现这一点的人都会发现jQuery工具覆盖在特色图片上的数据rel属性很难使用。相反，我重新配置了jQuery，以便在特色图像之前找到锚上的rel标记，并调用rel标记上的post id

WP代码：

<a rel="#<?php the_id(); ?>" href="#<?php the_id(); ?>" class="bio"><?php the_post_thumbnail('full'); ?></a>

希望这能帮助其他类似情况的人

<a rel="#<?php the_id(); ?>" href="#<?php the_id(); ?>" class="bio"><?php the_post_thumbnail('full'); ?></a>

// Team Bios Overlay
jQuery(document).ready(function() {
    jQuery('a.bio[rel]').overlay({
        mask: '#000',
        effect: 'apple'
    });
});