我很难从Javascript创建新的Elementor块(在本例中,我从URL和插槽填充到列中的图像)。
我目前在我的页面中有使用html块的脚本,并且我已经设置了按钮被点击时的动作。然而,我一直找不到一个通过代码在网页上生成新的elementor块的例子。
有没有好的例子可以让我看看呢?
如果这是一个新手问题,我很抱歉。
这是我想要做的:
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>
发布于 2018-09-23 02:00:21
首先,如果您想要清除页面,我建议您使用具有唯一ID的主div或节
<section id="main">
<div id="mySections" class="row"> </div>
</section>
然后你在这里添加或删除你的内容,如果我知道你想要4个部分,你可以使用bootstrap或你自己的css类在bootstrap中做这个例子:
(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);
}
}())
我不知道你是如何获得图像的,但希望它能有所帮助,当然你可以改进这一点。
https://stackoverflow.com/questions/52458049
复制相似问题