【问题标题】:Adding content to Bootstrap Modal dynamically with Advanced Custom Fields in WordPress使用 WordPress 中的高级自定义字段将内容动态添加到 Bootstrap 模式
【发布时间】:2016-01-23 05:00:27
【问题描述】:
我正在尝试遍历使用高级自定义字段创建的自定义字段,并在模式窗口中显示图像库(使用中继器字段)。 WordPress 安装使用 Bootstrap,我正在尝试根据帖子的顺序更改模式窗口的 ID。第一篇文章应该显示#myModal-1,第二篇文章应该输出#myModal-2 等。这应该在模态窗口代码中相应地复制。
由于某种原因,计数器不工作,我不知道为什么。
相关代码见下面的Pastebin。
http://pastebin.com/nYwnMBEJ
【问题讨论】:
标签:
php
wordpress
twitter-bootstrap
modal-dialog
advanced-custom-fields
【解决方案1】:
你的$i++;应该在最后。
示例:
<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">×</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 -->