WordPress:在 JavaScript 中获取块 ID
WordPress: Get Block ID in JavaScript
我创建了一个自定义古腾堡块来显示滑块。
我正在使用 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吗?
您可以获得相对于 .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,
});
}
我创建了一个自定义古腾堡块来显示滑块。
我正在使用 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吗?
您可以获得相对于 .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,
});
}