0

我有一个公司团队成员的页面。团队成员使用具有姓名、职位和传记字段的 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);
    })
});
4

1 回答 1

1

如果您不需要显示 bio 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);
    })
});
于 2019-11-12T23:52:16.700 回答