检索由转发器字段生成的 ACF 唯一 ID 以用于 JavaScript 函数

Question

我正在使用高级自定义字段来重复 divs。有一个唯一 ID 注入到包装器 div 中，用于显示内容的点击功能（我不能使用 class，因为它会同时触发所有 div）。

如何在我的 javascript 函数中动态定位此 ID？这是我的代码；

    <?php if( have_rows('team') ): $i = 0; ?>
        <?php while( have_rows('team') ): the_row(); $i++;

            $image = get_sub_field('image');
            $position = get_sub_field('position');
            $name = get_sub_field('name');
            $bio = get_sub_field('bio');

            ?>

            <div class="small-12 medium-4 large-4 columns" style="float: left;">
                <div class="card">
                    <button class="teamInfo" id="wrap-<?php echo $i; ?>">
                        <div class="card-image">
                            <img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
                        </div>
                        <div class="card-content light-grey-bg">
                            <p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
                        </div>
                        <div class="card-action blue-bg center text-center">
                            <p class="hind bold white caps"><?php echo $name; ?></p>
                        </div>
                    </button>
                    <div class="card-reveal" id="show-<?php echo $i; ?>">
                        <span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
                                <span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
                            </button>
                        <p class="hind dark-grey pt1"><?php echo $bio; ?></p>
                    </div>
                </div>
            </div>

        <?php endwhile; ?>
    <?php endif; ?>

还有我的函数；

<script>
    (function($) {

        $('#wrap-1').on('click',function(){
            $('#show-1').slideToggle('slow');
        });
        $('#show-1 .close').on('click',function(){
            $('#show-1').slideToggle('slow');
        });

    })( jQuery );
</script>

编辑：此处动态注入id；

id="wrap-<?php echo $i; ?>"

Answer 1

我会考虑使用 this。您仍然可以将 class 用于事件选择器，并在处理程序中使用上下文来了解选择了哪个。

<script>
    (function($) {

        $('.teamInfo').on('click',function(){
            $(this).slideToggle('slow');
        });
        $('.teamInfo').on('click',function(){
            $(this).slideToggle('slow');
        });

    })( jQuery );
</script>

^ 我不清楚您是否添加了 .close class 作为视觉提示，或者您是否想使用它来跟踪显示的状态。可能只需要一个处理程序来充当切换。或者如果转换中需要发生其他事情，则切换中的 if 语句。

Answer 2

我会将 ID 添加到数据属性中的每个元素，并使用 this 和该 ID 进行适当切换。总结一下JS，当你点击按钮时，你会得到存储的数据属性，可以用来找到合适的目标进行切换。

对于 HTML，我将数据 ID 添加到 #show div，并从按钮中完全删除了该 ID。不需要。

HTML 变化：

<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">

和

<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">`

Javascript

(function($) {

    $('.teamInfo').on('click', function() {
        var id = $(this).data('toggle-id');
        $('#show-' + id).slideToggle();
    });


    $('.card-reveal .close').on('click',function() {
        var id = $(this).closest('.card-reveal').data('toggle-id');
        $('#show-' + id).slideToggle('slow');
    });

})( jQuery );

以及您发布的整个 HTML：

    <div class="small-12 medium-4 large-4 columns" style="float: left;">
    <div class="card">
        <button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
            <div class="card-image">
                <img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
            </div>
            <div class="card-content light-grey-bg">
                <p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
            </div>
            <div class="card-action blue-bg center text-center">
                <p class="hind bold white caps"><?php echo $name; ?></p>
            </div>
        </button>
        <div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">
            <span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
                <span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
            </button>
            <p class="hind dark-grey pt1"><?php echo $bio; ?></p>
        </div>
    </div>
</div>

检索由转发器字段生成的 ACF 唯一 ID 以用于 JavaScript 函数

Retrieve ACF unique ID generated by repeater field for use in a JavaScript function

javascript

php

wordpress

jquery

advanced-custom-fields