从 ACF 中继器字段传递单个 PHP 值答案

【问题标题】：Pass single PHP value from ACF Repeater Field从 ACF 中继器字段传递单个 PHP 值
【发布时间】：2019-11-13 07:52:16
【问题描述】：

我有一个公司团队成员的页面。团队成员使用具有姓名、职位和传记字段的 ACF 转发器呈现。在页面上，我只想呈现他们的姓名和职位。如果您要单击团队成员，则会打开一个显示该团队成员传记的模式。

我有这个工作，但我的方法将 Biography 字段添加到每个团队成员的 DOM 中，隐藏它，并在单击时将其传递到模式中。我想知道是否可以将 Biography 字段传递到模式中，而不必最初在 DOM 中呈现文本并隐藏它？

以下是我当前的代码：

<!-- acf repeater -->
<?php if( have_rows('team_member') ): ?>
    <?php while( have_rows('team_member') ): the_row();
        $name = get_sub_field('name');
        $job_title = get_sub_field('job_title');
        $biography = get_sub_field('biography');

    ?>
        <div class="team-member">
            <div>
                <?php echo $name ?>
            </div>
            <div>
                <?php echo $job_title ?>
            </div>
            <div class="biography" style="display: none;">
                <?php echo $biography ?>
            </div>
        </div>
    <?php endwhile; ?>

    <!-- modal -->
    <div class="modal">
        modal
        <div class="modal-biography">

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

<!-- javascript -->
jQuery(function($) {
    $('.team-member').on('click', function() {
        var modalBiography = $(this).find('.biography').text();
        $('.modal-biography').text(modalBiography);
    })
});

【问题讨论】：

您可以在 .team-member 上内联函数调用并在 PHP 中设置参数......但这是一种丑陋的做事方式。（<button onclick="setModal(<?php echo $biography ?>)"> ...并在javascript中编写相应的函数，function setModal(modalBiography) {/* Do stuff here */}）您还可以在dom中为每个team_member块渲染不同的modal元素，然后在javascript中的事件监听器中，拥有它显示相应的模态元素并隐藏其余元素。老实说，你这样做的方式还可以

标签： javascript php advanced-custom-fields acfpro

【解决方案1】：

如果您不需要显示个人简介 div，我建议将其放入 data-bio 属性中：

<div class="team-member" data-bio="<?php echo $biography; ?>">
    <div><?php echo $name; ?></div>
    <div><?php echo $job_title; ?></div>
</div>

然后稍微调整 js 来拉取这个data-bio：

jQuery(function($) {
    $('.team-member').on('click', function() {
        var modalBiography = $(this).data('bio');
        $('.modal-biography').text(modalBiography);
    })
});

【讨论】：

感谢您的回答。这对我来说效果很好。