Дублирующиеся функции внутри WP_Query

У меня есть 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 с данными для каждого.

http://img42.com/k2Cdx

Но независимо от того, на какой я нажимаю, модал просто выбирает данные из первого поста.

http://img42.com/Pjq9P

2 ответа

Решение

Ваш цикл создает несколько модалов с одинаковыми классами и идентификаторами. Когда вы нажимаете на ссылку, чтобы отобразить модальное окно, JS получит только первый элемент в DOM. Я предлагаю вам создать счетчик циклов для увеличения ваших идентификаторов.

До начала цикла while ->

<?php $count = 0; ?>

Просто внутри цикла while ->

<?php $count++; ?>

Тогда для вашего удостоверения личности ->

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

Это приведет к увеличению идентификаторов, которые вы можете затем настроить с помощью jQuery. Если вы хотите, чтобы это работало правильно, вам нужно будет подсчитать количество записей, а затем включить цикл в jQuery, или вы можете локализовать скрипт и вывести переменные на ваш JS.

the_title() должен нуждаться в любом типе аргумента для идентификации текущего итерирующего поста. Вы не указываете post_id ни объект post, ни какое-либо глобальное значение, которое может использоваться the_title().

Например, вы можете передать аргумент $post->ID так же, как в get_post_thumbnail_id($post->ID)

Можно вопрос? Где вы устанавливаете $ post var? Я полагаю, что вы хотите сделать это внутри цикла while, но я не вижу, где это было сделано

Может быть, вам нужно что-то вроде

$post = $members->the_post();

В вашем цикле while первая строка...

Другие вопросы по тегам