douqiang1910 2014-02-24 16:31
浏览 35
已采纳

WP_Query中的重复函数

I have a WP_Query that shows a list of posts. Pretty standard, however, within that I'm call multiple instances of functions like the_title(); for use in a popup modal that is supposed to display the post that was clicked on, but instead just shows the first one in the loop again.

<?php
   $members = new WP_Query( 'post_type=member' );
   if ( $members->have_posts() ) :
   while ( $members->have_posts() ) : $members->the_post();

   // get the src of the post thumbnail
   $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full', false, '' ); 
   $thumbnailSrc = $src[0];  
   ?>

        <div class="col-sm-3 member">
          <img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumbnailSrc; ?>&h=250&w=250&zc=1q=100" alt="" data-toggle="modal" data-target="#memberModal">
          <h4><?php the_title(); ?></h4>
          <p><?php the_field('member_title'); ?></p>
        </div>
        <div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              </div>
              <div class="modal-body">
                <img src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $thumbnailSrc; ?>&h=300&w=650&zc=1q=100" alt="" class="img-responsive">
                <h2><?php the_title(); ?></h2>
                <p><?php the_field('member_title'); ?></p>
                <p class="lead"><?php the_field('member_introduction'); ?></p>
                <?php the_field('member_description'); ?>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <?php endwhile; else:
          echo '<p>Sorry, there are no posts to display</p>';
          endif;
        ?>

In the example above, a div.member is created for each post. But then the div.modal only shows the first post.

In a way, I'm trying to create one of these (div.member + div.modal) for each post.

UPDATE:

Here is a visual representation. The loop spits out the four 'members' in the post_type with the data for each one.

http://img42.com/k2Cdx

But no matter which one I click on, the modal just fetches the data from the first post.

http://img42.com/Pjq9P

  • 写回答

2条回答 默认 最新

  • duanmei1536 2014-03-03 11:57
    关注

    Your loop is creating multiple modals all with the same classes and IDs. When you click on the link to display the modal, the JS will only get the first item in the DOM. I suggest you create a loop counter to increment your IDs.

    Before the while loop starts ->

    <?php $count = 0; ?>
    

    Just inside the while loop ->

    <?php $count++; ?>
    

    Then for your ID ->

    <div class="modal fade" id="memberModal<?php echo $count; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    

    This would increment the IDs which you can then target with jQuery. If you want this to function correctly, you're going to have to count the number of entries and then loop in jQuery as well or you could localize the script and output the variables to your JS.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能