javascript - 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吗?
解决方案
您可以获取相对于 .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,
});
}
推荐阅读
- html - 使用 Angular 7 在数据表中进行列过滤
- java - Java AES 加密是否符合 FIPS 140-2?
- asp.net-mvc - Redis 的 ASP.NET 输出缓存提供程序不存储
- javascript - Object.Assign 不创建新实例
- python - Python获取密码并验证while循环
- c++ - string::capacity/reserve() 是否计算终止为空?
- sdl - SDL_mixer 可以平移吗?
- ios - 如何将字符串元组分配给单元格的文本?
- flutter - 在 Google Play 商店上发布应用时出现 Flutter 问题
- hyperledger-fabric - 基础网络(Fabric Samples)中的channelID byfn-sys-channel是什么?