javascript - 如何使用 javascript 创建 elementor 块
问题描述
我很难从 Javascript 创建新的 Elementor 块(在这种情况下,我从 URL 填充并插入列中的图像)。
我目前在我的页面中有使用 html 块的脚本,并且我设置了单击按钮时的操作。但是,我一直无法找到通过代码在网页上生成新元素块的示例。
我可以看看一个很好的例子吗?
如果这是一个新手问题,我很抱歉。
这是我正在尝试做的事情:
1)当一个按钮被点击时,清除页面的其余部分
2) 生成一个包含 4 个部分的新分组列
3)在列的每个部分中创建 1 个图像块
4) 使用来自 URL 的图像填充每个图像块
提前致谢!
<script>
document.addEventListener("DOMContentLoaded", function(event) {
jQuery('.ShowAllImages').click(function(){
ShowAllImages();
});
});
function ShowAllImages() {
//Clear the page below the button
//Create x amount of grouping sections within page
//Create y new elementor images in those sections
//Populate those y elementor image blocks with images
}
</script>
解决方案
首先,如果您想清除页面,我建议您使用具有唯一 ID 的主 div 或部分
<section id="main">
<div id="mySections" class="row"> </div>
</section>
因此,如果我理解您需要 4 个部分,您可以在此处附加或删除您的内容,您可以使用引导程序或您自己的 css 类在引导程序中执行该示例:
(function (){
function ShowAllImages() {
clear();
addImages();
}
function clear() {
let parent = document.getElementById('main');
let child = document.getElementById('mySections');
parent.removeChild(child);
}
function addImages () {
let parent = document.getElementById('main');
let child1 = document.createElement('div');
child1.classList.add('col-md-3');
let child2 = document.createElement('div');
child2.classList.add('col-md-3');
let child3 = document.createElement('div');
child3.classList.add('col-md-3');
let child4 = document.createElement('div');
child4.classList.add('col-md-3');
// then you can add your images in each section with
let img1 = document.createElement('img');
child1.appendChild(img1);
// ...
parent.appendChild(child1);
parent.appendChild(child2);
parent.appendChild(child3);
parent.appendChild(child4);
}
}())
我不知道您是如何获取图像的,但希望它有所帮助,当然您可以改进它。
推荐阅读
- javascript - 猫头鹰轮播仅在包含部分焦点时自动播放
- docker - Kubernetes-Help Needed-FailedMount 3m38s
- ruby-on-rails - Rails:通过模型列之间的匹配进行过滤
- reactjs - 如何在 react js 中从 tinymc 编辑器中获取价值?
- ember.js - 为什么我的动作没有在带有 ember js 的模式内部触发?
- vb.net - VB.Net - 时间变量与当前时间比较
- java - FileInputStream 和 ByteArrayInputStream 的区别
- bash - SHELL 删除最后一个元素的逗号
- wpf - 当鼠标悬停在 WPF 中的图像上时,无法更改图标颜色
- git - 获取描述 git 中当前结帐的信息