jquery 在 wordpress ACF 自定义块内不能 select 元素在块外

Question

我有一个像这样的高级自定义字段古腾堡块模板：

<article class="m04x">
    <hr>
    <div class="row">
        <div class="col-md-12">
            <h4>On this site:</h4>
            <ol id="anchor_list">
            </ol>
        </div>
    </div>
</article>

<script>

    (function($) {
        var anchor_list = $('#anchor_list');
        $('.anchor-block').each(function() {
            var heading_text = $(this).html();
            var href = '#' + $(this).attr('id');
            var html = '<li class="nav-item"><a class="fontstyle" href="' + href + '">' + heading_text + '</a></li>';
            anchor_list.append(html);
        });
    })(jQuery);

</script>

注册使用：

function register_on_this_site_block() {
    if ( function_exists( 'acf_register_block' ) ) {
        acf_register_block(array(
            'name'            => 'on-this-site-block',
            'title'           => __( 'On This Site Block', 'wds'),
            'description'     => __( 'Links to parts of current page.', 'wds'),
            'render_template' => get_template_directory() . '/template-parts/blocks/on_this_site.php',
            'category'        => 'layout',
            'icon'            => 'align-center',
            'mode'            => 'preview',
            'keywords'        => array('links'),
        ));
    }
}
add_action( 'acf/init', 'register_on_this_site_block' );

JQuery 可以 select '#anchor_list' 似乎是因为它在同一个模板中。但是当 selecting '.anchor-block' 它 returns 一个长度为 0 的对象并且 'each' 函数什么都不做。

如何访问此块之外的元素？实际上应该提到的是，'.anchor-block' 元素位于另一个自定义 ACF 块中。

Answer 1

正如 Taplar 所说，我 selecting 的元素在我尝试 select 时并不存在。我认为我的 (function($) { })(jQuery) 函数在页面完全加载后是运行但实际上它不是。我将代码更改为此并且有效：

    var $ = (jQuery);
    $(window).bind("load", function() {
        var anchor_list = $('#anchor_list');
        $('.anchor-block').each(function() {
            var heading_text = $(this).html();
            var href = '#' + $(this).attr('id');
            var html = '<li class="nav-item"><a class="fontstyle" href="' + href + '">' + heading_text + '</a></li>';
            anchor_list.append(html);
        });
    });

虽然您可以在用 <li> 元素填充之前看到空列表的瞬间，但这对我来说很好。

jquery 在 wordpress ACF 自定义块内不能 select 元素在块外

jquery inside wordpress ACF custom block can't select element outside of block

javascript

wordpress

jquery

advanced-custom-fields

wordpress-gutenberg