Wordpress ACF 转发器字段和 Bootstrap 模式

Question

我正在使用 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

Answer 1

你还没有打印$i，试试这个代码...

<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-<?php echo $i; ?>">

                        <?php //your code ?>

                    </div>

                    <div class="modal fade" id="profile-box-<?php echo $i; ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

                        <?php //your code ?>

                    </div>

                <?php  $i++;

                endwhile;

            else :

            // no rows found

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

Answer 2

我设法使用上述哲学解决了这个问题，但使用了以下代码：

<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="<?php echo '#exampleModal' . $i ?>">
                                <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="<?php echo 'exampleModal' . $i ?>" 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>

Answer 3

您可以使用名为 get_row_index() 的 acf 内置函数为所有行设置索引。它从 1 开始，一直到行数的末尾。

<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') ):
    // loop through the rows of data
    while ( have_rows('team_profile_boxes') ) : the_row(); $i = get_row_index();?>
        <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-<?php echo $i;?>">
                    <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-<?php echo $i;?>" 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 endwhile; endif; ?>
    </div>
</div>