Как создать элементарные блоки с помощью JavaScript - PullRequest
Новая
       8

Как создать элементарные блоки с помощью JavaScript

0 голосов
/ 22 сентября 2018

У меня возникают трудности при создании новых блоков Elementor (в данном случае изображений, которые я заполняю с URL-адреса и вставляем в столбец) из Javascript.

У меня в настоящее время есть скрипты на моей странице, использующие блок 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>

1 Ответ

0 голосов
/ 22 сентября 2018

Прежде всего, если вы хотите очистить страницу, я рекомендую вам использовать основной раздел или раздел с уникальным идентификатором 

<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);
}
}())

Я не знаю, как вы получаете изображения, но надеюсь, что это поможет, конечно, вы можете улучшить это.

...