在Gutenberg块中增加一个类名- Wordpress/Gutenberg + Timber + ACF
在Gutenberg块中增加一个类名- Wordpress/Gutenberg + Timber + ACF
提问于 2020-06-06 04:13:23
对于一个项目，我使用了Timber + ACF + Wordpress Gutenberg界面
我创建了一个带有ACF的块，用于Gutenberg界面来显示触发器。
要显示多个触发器，我需要将我的Gutenberg块链接到一个惟一的jQuery函数。
为了用jQuery flipbook插件创建一个flipbook，我用footer.twig编写了这段代码，以便能够插入我的pdf的url：
$('.flipbook').flipBook({
pdfUrl: "assets/pdf/link-to-unique-file.pdf"
});对于我的Gutenberg块，我用block-flipbook.twig编写了以下代码：
<article class="bloc">
<div class="flipbook"></div>
</article>但是使用Gutenberg，用户可以创建多个触发器块。
我想要这样的东西：
$('.flipbook-1').flipBook({
pdfUrl: "assets/pdf/link-to-unique-file-1.pdf"
});
$('.flipbook-2').flipBook({
pdfUrl: "assets/pdf/link-to-unique-file-2.pdf"
});我想在我的html文件中找到这样的东西：
<article class="bloc">
<div class="flipbook-1"></div>
</article>
<article class="bloc">
<div class="flipbook-2"></div>
</article>如何在我的Gutenberg块中增加flipbook类？
回答 1
Stack Overflow用户
发布于 2020-06-06 18:34:27
获取块的索引可能是您首先考虑的事情，但是您也可以用不同的方法来解决这个问题。
我假设您保存了应该显示在ACF字段中的PDF文件。在这种情况下，可以在data-pdf属性中添加PDF。
<article class="bloc">
<div class="flipbook" data-pdf="{{ file.src }}"></div>
</article>然后，您可以编写一个jQuery函数来查找并创建flipbook。
var flipbooks = $('.flipbook');
if (flipbooks.length > 0) {
flipbooks.each(function(i, el) {
var src = el.attr('data-pdf');
el.flipBook({
pdfUrl: src
})
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62227202
复制相关文章
相似问题
腾讯云开发者
