jQuery 工具仅覆盖打开 1 个元素答案

【问题标题】：jQuery tools overlay only opening 1 elementjQuery 工具仅覆盖打开 1 个元素
【发布时间】：2013-06-05 14:55:31
【问题描述】：

所以我遇到了一个问题，我在 Wordpress 中有一个页面查询自定义帖子类型。它拉入名称和特色图像。当您单击特色图片时，它会打开一个包含内容和其他信息的弹出窗口。这是链接：http://pegasusemergencygrp.com.s164407.gridserver.com/who-we-are/meet-our-team/

这是我 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(); ?>

这是我的 JS：

jQuery(document).ready(function() {
    var imgatt = jQuery("span.photo a img").attr('data-rel');
    jQuery("span.photo a img").overlay({
        target: imgatt,
    }); });

脚本是半工作的，当我点击图片时，它会弹出打开信息，但如果我点击第二张图片，它也会弹出打开第一个项目的信息。他们都在 data-rel 标记上生成唯一 ID，带有 post id，并且覆盖文章类具有匹配的 ID。来源：http://jquerytools.org/demos/overlay/index.html

【问题讨论】：

标签： wordpress overlay jquery-tools

【解决方案1】：

解决了这个问题。任何可能偶然发现这一点的人似乎都很难使用 jQuery 工具覆盖在特色图像上的 data-rel 属性。相反，我重新配置了 jQuery 以在特色图像之前的锚点上找到 rel 标签，并在 rel 标签上调用 post id。

WP 代码：

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

jQuery:

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

希望这可以帮助遇到类似情况的其他人

【讨论】：