Question

所以我遇到了一个问题，我在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,
    }); });

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

Answer 1

解决了这个问题。任何可能偶然发现它的人看来jQuery Tools叠加在特色图像上的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'
    });
});

希望这可以帮助其他类似场景的人

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

1 个答案: