使用WordPress中的高级自定义字段动态地向Bootstrap Modal添加内容

Question

I'm trying to loop through my custom fields created with Advanced Custom Fields and display an image gallery (using a repeater field) in a modal window. The WordPress installation utilizes Bootstrap and I'm trying to change the ID of the modal window based on the order of the post. First post should display #myModal-1, where the second post should output #myModal-2 etc. This should be replicated in the modal window code accordingly.

For some reason the counter is not working and I have no idea why.

See Pastebin below for relevant code.

http://pastebin.com/nYwnMBEJ

Answer 1

Your $i++; should be in the endwhile.

example:

<div class="sidebar">
  <p><strong>Role:</strong>
    <?php the_field( 'prole') ?>
  </p>
  <!-- Project Role -->
  <p><strong>Project Type:</strong>
    <?php the_field( 'ptype') ?>
  </p>
  <!-- Project Type -->

  <?php if(get_field( 'repeater')): ; ?>

  <?php $i=0; while(has_sub_field( 'repeater')):; ?>
  <a href="#" data-toggle="modal" data-target="#myModal-<?php echo $i; ?>">toggle goes here</a>

  <?php $i++; endwhile; ?>

  <?php endif; ?>

  <?php if(get_field( 'repeater')):  ; ?>

  <?php $i=0; while(has_sub_field( 'repeater')): ; ?>

  <!-- Modal -->
  <div class="modal fade col-md-4" id="myModal-<?php echo $i; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-lg">
      <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>
        </div>
        <!-- /modal-header -->

        <div class="row">
          <div class="col-xs-11">

            <img src="<?php the_sub_field('gallery'); ?>" />

          </div>
          <!-- /col -->
        </div>
        <!-- /row -->

      </div>
      <!-- /modal-content -->
    </div>
    <!-- /modal-dialog -->
  </div>
  <!-- /modal -->

  <?php $i++; endwhile; ?>

  <?php endif; ?>

</div <!-- /sidebar -->

</div>
<!-- /col -->