[英]Adding content to Bootstrap Modal dynamically with Advanced Custom Fields in WordPress
我试图遍历使用“高级自定义字段”创建的自定义字段,并在模式窗口中显示图像库(使用转发器字段)。 WordPress安装利用了Bootstrap,我正在尝试根据发布的顺序更改模式窗口的ID。 第一篇文章应显示#myModal-1,第二篇文章应显示#myModal-2等。应相应地将其复制到模式窗口代码中。
由于某种原因,计数器无法正常工作,我也不知道为什么。
有关相关代码,请参见下面的Pastebin。
您的$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 -->
今天才发现这个,我很晚才知道,但以为我会分享我的代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.