While循環中的Bootstrap模式

我正在使用高級自定義字段插件與Wordpress和Bootstrap風格。While循環中的Bootstrap模式

我有一個while循環來顯示一些自定義帖子的問題。就在第一帖子內容的模態體「

<?php the_field('desc_completa_aula'); ?>

」的顯示。我只想單獨顯示所有的模態實體。

我試圖清理jquery，但沒有成功。你們能幫我嗎？

<?php 

      // args 
      $args = array(
       'posts_per_page' => 10, 
       'post_type' => 'post', 
       'category_name' => 'aula-avulsa', 
       'orderby' => 'date', 
       'order' => 'DESC' 
      ); 


      // query 
      $the_query = new WP_Query($args); 

      ?> 
      <?php if ($the_query->have_posts()): ?> 

       <div class="row" style="text-align: center;"> 
        <?php while ($the_query->have_posts()) : $the_query->the_post(); ?> 
         <div class="col-lg-4 col-md-4 col-xs-6"> 
          <p class="subtitle-lession"><?php the_field('aula_ou_curso'); ?></p> 
          <h1 class="w-blog-entry-title-h" style=""><?php the_field('titulo_aula'); ?></h1> 
          <p><strong><i class="fa fa-calendar"></i> Data</strong><br/> <?php the_field('data_aula'); ?></p> 
          <p><strong><i class="fa fa-clock-o"></i> Horário</strong><br/> <?php the_field('horário_aula'); ?></p> 
          <p class="description-lession"><strong><i class="fa fa-pencil-square-o"></i> Descrição</strong><br/> 
           <?php the_field('desc_pequena_aula'); ?> 
          </p> 

          <a href="#contato"> 
           <button class="btn-lession">Fazer Inscrição</button> 
          </a> 

          <!-- Button trigger modal --> 
          <button type="button" class="btn-lession-info" data-toggle="modal" data-target="#myModal" title="<?php the_field('desc_completa_aula'); ?>"> 
           Saiba mais 
          </button> 

          <!-- Modal --> 
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
           <div class="modal-dialog" role="document"> 
            <div class="modal-content"> 
             <div class="modal-header"> 
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
              <h4 class="modal-title" id="myModalLabel"><?php the_field('titulo_aula'); ?></h4> 
             </div> 
             <div class="modal-body"> 
               <p style="color: #000"> <?php the_field('desc_completa_aula'); ?></p> 
             </div> 
             <div class="modal-footer"> 
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
             </div> 
            </div> 
           </div> 
          </div> 
         </div> 
        <?php endwhile; ?> 
       </div> 
      <?php endif; ?> 

      <?php wp_reset_query();  // Restore global post data stomped by the_post(). ?>

我用這段JavaScript代碼：

<script type="text/javascript"> 
 
$(document).ready(function() { 
 
    $('.modal').on('hidden.bs.modal', function(e) 
 
    { 
 
     $(this).removeData(); 
 
    }) ; 
 
}); 
 
</script>

來源

2016-02-21 Daniel Macedo

我認爲你的問題是，你有你的所有帖子相同的模式myModal。您需要引入隨每個循環而增加的變量i。這樣你可以區分每種模態。

來源

2016-02-22 16:21:25 CiprianD

While循環中的Bootstrap模式

回答

相關問題