我如何让 Bootstrap 模式工作并动态打开每张幻灯片（自定义 post 类型）？

Question

好的，我有一个可以完美运行并生成所有自定义 post 类型图像和文本的滑块。现在，当我单击模态滑块中的内容时，我需要打开模态中的一些内容和我使用高级自定义字段设置的描述字段。这是滑块组件的代码：

  <div id="it-list" class="container section">
     <div class="section-wrapper">
       <h3 class="widget-title"><span>2016 "IT LIST" HONOREES</span></h3>      
       <div class="slide-wrapper">
       <div class="it-list-slide">
       <?php

    wp_reset_postdata();
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
        'post_type' => 'ddg-itlist',
        'numberposts' => -1,
        'orderby' => 'rand',  
    );

    $postslist = get_posts( $args );

    foreach ($postslist as $post) :  setup_postdata($post);
    $featuretitle = get_the_title($post->ID);
    $post_id    = get_the_id();
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );   
    ?>
    <div class="main-slide-div col-sm-4 center">
        <a href="#" class="modal-toggle" data-toggle="modal" data-target="#post<?php echo $post_id; ?>">
            <div class="it-list-profile-image" style="background-image: url('<?php echo $thumb['0']; ?>');"></div>
            <h4 class="it-list-profile-title"><?php echo $featuretitle; ?></h4>
            <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p>
            <img src="<?php the_field('company_logo'); ?>" class="slide-logo">
        </a>
    </div><!-- end of main slide div -->

                           <!-- Modal -->
<div class="modal fade" id="post<?php echo $post_id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      <div class="modal-body">
        <div class="it-list-profile">
            <div class="it-list-profile-info">
                <div class="row">
                    <div class="it-list-profile-image modal-profile-img col-xs-4 col-sm-4 col-md-5" style="background-image: url('<?php echo $thumb['0']; ?>');">
                    </div><!-- end of modal-profile-image -->
                    <div class="col-xs-8 col-sm-8 col-md-7">
                        <h1><?php echo $featuretitle; ?></h1>
                        <p class="itlist-profile-jobtitle"><?php the_field('job_title'); ?></p>
                        <img src="<?php the_field('company_logo'); ?>" class="slide-logo">
                        <p class="itlist-profile-jobtitle"><?php the_field('description_quote'); ?></p>
                    </div><!-- end of text and logo -->
                </div><!-- end of row -->
            </div><!-- end of it-list-profile-info -->
            <div class="it-list-description">
                <p><?php the_field('description_paragraph'); ?></p>
            </div><!-- end of it-list-description --> 
        </div><!-- end of it-list profile -->
      </div><!-- end of modal body -->
      <!-- <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div> -->
    </div><!-- end of modal content -->
  </div><!-- end of modal dialog -->
</div><!-- end of modal -->


    <?php endforeach; ?>
</div><!-- end of it slide -->
</div><!-- end of slide wrapper -->

任何帮助将不胜感激。

Answer 1

我发现为循环中的每个 post 指定不同模态的最简单方法是增加数据切换选择器和模态 class，为此你会在循环之前使用以下行 -

<?php $i = 0;?>

然后在循环中使用 -

<?php $i++;?>

然后为数据目标选择器输入类似 -

的内容

data-target='.modal<?php echo $i;?>'

模态 class 为 -

class='modal modal<?php echo $i;?>'

希望这对您有所帮助，我已经正确理解您的问题了！

我如何让 Bootstrap 模式工作并动态打开每张幻灯片（自定义 post 类型）？

How do I get a Bootstrap modal to work and open for each slide(custom post types) dynamically?

php

wordpress

jquery

bootstrap-modal

advanced-custom-fields