【问题标题】: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">&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 -->
    

    【讨论】:

      【解决方案2】:

      今天才发现这个,我知道它很晚,但我想我会分享我的代码。

      https://gist.github.com/anonymous/b72d29ca7217b1fb7036

      【讨论】:

        猜你喜欢
        • 2019-03-03
        • 2015-12-24
        • 2021-06-04
        • 1970-01-01
        • 1970-01-01
        • 2018-02-24
        • 2013-11-25
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多