0

我很难从 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>
4

1 回答 1

1

首先，如果您想清除页面，我建议您使用具有唯一 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);
}
}())

我不知道您是如何获取图像的，但希望它有所帮助，当然您可以改进它。

于 2018-09-22T18:00:20.917 回答