Wordpress ACF中继器字段和Bootstrap模式

问题描述 投票:0回答:3

我正在使用Bootstrap选项卡在ACF转发器字段中显示包含员工个人资料和照片的网格,当单击该个人资料时,会弹出一个引导程序模式,并在转发器子字段中填写信息。

一切正常,但是当您单击不同的配置文件时,模态中有相同的配置文件信息,而没有不同的配置文件信息。

这是我的代码

    <div class="tab-content" id="myTabContent">

        <div class="tab-pane fade show active" id="team" role="tabpanel" aria-labelledby="team-tab">
        <div class="row justify-content-md-between">

<?php 
if( have_rows('team_profile_boxes') ):
    $i = 1;

    // loop through the rows of data
    while ( have_rows('team_profile_boxes') ) : the_row(); ?>

                    <div id="profile-box">
                        <div class="profile-image-box">
                            <div class="profile-image" style="background-image: url('<?php echo the_sub_field('profile_image'); ?>');"></div>
                            <div class="profile-image-hover" style="background-image: url('<?php echo the_sub_field('second_profile_image'); ?>');"></div>
                        </div>
                    <div class="profile-details">
                            <a data-toggle="modal" href="#exampleModal">
                                <h4>
                                    <span><?php the_sub_field('division_title'); ?></span>
                                    <br>
                                    <?php the_sub_field('profile_name'); ?> <br>
                                    <span><?php the_sub_field('job_title'); ?></span>
                                </h4>
                            </a>
                    </div>

                </div>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                        <div class="modal-body">
                            <?php the_sub_field('profile_information'); ?>
                        </div>
                        </div>
                        </div>
                    </div>

<?php  $i++;

    endwhile;

else :

    // no rows found

endif;
?>
</div>
</div>

我已经看过了这个例子,但似乎并不适用:ACF Repeater + Modal

wordpress bootstrap-modal acfpro
3个回答
0
投票
您尚未打印$i,请尝试此代码...

0
投票
我设法使用上面的原理来解决它,但是使用下面的代码:

0
投票
您可以使用称为

get_row_index()]的acf内置函数为所有行设置索引。它从1开始,一直到行数结束。

© www.soinside.com 2019 - 2024. All rights reserved.