个性化阅读
专注于IT技术分析

WordPress:在JavaScript中获取块ID

我创建了一个自定义的Gutenberg块来显示滑块。

我正在使用ACF中的示例:https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/

到目前为止一切正常。但是现在我需要自定义块的JavaScrit文件中的块ID。

这是示例中的JS代码:

(function($){

    var initializeBlock = function( $block ) {
        $block.find('.slides').slick({
            dots: true, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true, adaptiveHeight: true, focusOnSelect: true
        });     
    }

    // Initialize each block on page load (front end).
    $(document).ready(function(){
        $('.slider').each(function(){
            initializeBlock( $(this) );
        });
    });

    // Initialize dynamic block preview (editor).
    if( window.acf ) {
        window.acf.addAction( 'render_block_preview/type=slider', initializeBlock );
    }

})(jQuery);

我已经像这样更改了部分JS代码(slick-vars只是示例):

var initializeBlock = function( $block ) {
            $block.find('.slides').slick({
                dots: false, arrows: false, appendArrows: $('.slider-arrows_BLOCK-ID'), slidesToShow: 1, mobileFirst: true, });
        }

如你所见, 我需要在该行中添加块ID:

appendArrows:$(‘。slider-arrows_BLOCK-ID’),

有什么方法可以获取JS文件中当前块的ID?


#1


你可以获得相对于.slides元素的元素

var initializeBlock = function( $block ) {
            var arrows = $block.find('[class^="slider-arrows"]');
            $block.find('.slides').slick({
                dots: false, arrows: false, appendArrows: arrows, slidesToShow: 1, mobileFirst: true, });
        }
赞(0) 打赏
未经允许不得转载:srcmini » WordPress:在JavaScript中获取块ID
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏