Question

我正在使用“引导程序”选项卡在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

您可以使用称为 get_row_index（）的acf内置函数为所有行设置索引。从1开始，一直到行数结束。

once

Answer 3

我设法使用上面的原理解决了这个问题，但是使用了以下代码：

<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>

WordPress ACF转发器字段和Bootstrap模式

3 个答案: