Question

我正在使用高级自定义字段来重复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; ?>"

Answer 1

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

<script>
    (function($) {

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

    })( jQuery );
</script>

^我不清楚您是否为视觉提示添加了.close类，或者您是否想要使用它来跟踪显示的状态。可能只需要一个处理程序作为切换。如果在转换中需要发生其他事情，则在切换中使用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函数

2 个答案: