JQuery внутри WordPress Пользовательский блок ACF не может выбрать элемент за пределами блока - PullRequest
Новая
       34

JQuery внутри WordPress Пользовательский блок ACF не может выбрать элемент за пределами блока

0 голосов
/ 20 марта 2019

У меня есть расширенный шаблон блока Гутенберга для настраиваемых полей, например: 

<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 может выбрать «#anchor_list», по-видимому, потому что он находится в том же шаблоне. Но при выборе .anchor-block он возвращает объект длиной 0, а функция each ничего не делает.

Как я могу получить доступ к элементам за пределами этого блока? На самом деле следует отметить, что элемент .anchor-block находится в другом пользовательском блоке ACF.

1 Ответ

0 голосов
/ 21 марта 2019

Как сказал Таплар, элементы, которые я выбирал, не существовали в то время, когда я пытался их выбрать.Я думал, что моя функция (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>, но это нормально для меня.

...