检索由转发器字段生成的 ACF 唯一 ID 以在 JavaScript 函数中使用答案

【问题标题】：Retrieve ACF unique ID generated by repeater field for use in a JavaScript function检索由转发器字段生成的 ACF 唯一 ID 以在 JavaScript 函数中使用
【发布时间】：2018-01-31 02:43:29
【问题描述】：

我正在使用高级自定义字段来重复 div。有一个唯一的 ID 注入到包装 div 中，用于显示内容的点击功能（我不能使用类，因为它一次触发所有 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; ?>"

【问题讨论】：

标签： javascript php jquery wordpress advanced-custom-fields

【解决方案1】：

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

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

【讨论】：

这非常有效！干的很好。非常感谢！

【解决方案2】：

我会考虑使用this。您仍然可以为事件选择器使用一个类，并且在处理程序中，通过上下文知道哪个被选中。

<script>
    (function($) {

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

    })( jQuery );
</script>

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

【讨论】：