While循环中的Bootstrap模态

时间:2016-02-21 23:09:36

标签: javascript php jquery wordpress twitter-bootstrap

我使用带有Wordpress和Bootstrap的高级自定义字段插件作为样式。

我在使用while循环时遇到问题,以显示一些自定义帖子。 只需第一个帖子内容模式正文"



<?php the_field('desc_completa_aula'); ?>
&#13;
&#13;
&#13;

&#34;正在显示。我希望将所有模态体分开,只有在单击每个模体时才会分开。

我试过清理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代码:

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

1 个答案:

答案 0 :(得分:0)

我认为您的问题是您的所有帖子都有相同的模式var geocoder = L.mapbox.geocoder('mapbox.places'), map = L.mapbox.map('map', 'examples.map-h67hf2ic'); geocoder.query('Kramgasse 42, Bern, Switzerland', showMap); function showMap(err, data) { // The geocoder can return an area, like a city, or a // point, like an address. Here we handle both cases, // by fitting the map bounds to an area or zooming to a point. if (data.lbounds) { map.fitBounds(data.lbounds); } else if (data.latlng) { map.setView([data.latlng[0], data.latlng[1]], 13); } } 。您需要引入一个随每个循环而增加的变量myModal。这样你就可以区分每种模态。