While 循环中的引导模式答案

【问题标题】：Bootstrap Modal in a While LoopWhile 循环中的引导模式
【发布时间】：2016-02-21 23:09:35
【问题描述】：

我将高级自定义字段插件与 Wordpress 和 Bootstrap 一起用于样式。

我在使用 while 循环来显示一些自定义帖子时遇到问题。只是第一个帖子内容modal-body"

&lt;?php the_field('desc_completa_aula'); ?&gt;

" 正在显示。我想单独显示所有模态体，仅在单击每个模态体时。

我尝试清理 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>

【问题讨论】：

标签： javascript php jquery wordpress twitter-bootstrap

【解决方案1】：

我认为您的问题是您的所有帖子都有相同的模态myModal。您需要引入一个变量i，该变量随着每个循环而增加。这样您就可以区分每个模态。

【讨论】：