0

投稿のリストを表示する WP_Query があります。ただし、かなり標準的ですが、その中で the_title(); のような関数の複数のインスタンスを呼び出しています。クリックされた投稿を表示するはずのポップアップモーダルで使用しますが、代わりにループの最初の投稿を再度表示します。

<?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;
        ?>

上記の例では、投稿ごとに div.member が作成されます。しかし、div.modal は最初の投稿のみを表示します。

ある意味では、投稿ごとにこれらのいずれか (div.member + div.modal) を作成しようとしています。

アップデート：

これが視覚的な表現です。ループは、post_type 内の 4 つの「メンバー」を、それぞれのデータとともに吐き出します。

http://img42.com/k2Cdx

しかし、どれをクリックしても、モーダルは最初の投稿からデータを取得するだけです。

http://img42.com/Pjq9P

4

2 に答える 2

1

ループは、すべて同じクラスと ID を持つ複数のモーダルを作成しています。リンクをクリックしてモーダルを表示すると、JS は DOM の最初の項目のみを取得します。ID をインクリメントするループ カウンターを作成することをお勧めします。

while ループの開始前 ->

<?php $count = 0; ?>

while ループのすぐ内側 ->

<?php $count++; ?>

それからあなたのIDのために - >

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

これにより、jQuery でターゲットにできる ID が増加します。これを正しく機能させたい場合は、エントリの数を数えてから jQuery でループするか、スクリプトをローカライズして変数を JS に出力する必要があります。

于 2014-03-03T11:57:56.757 に答える