Тег <templates> и DOM клонирование Card и вывод параметров
Здравствуйте, есть задумка в одностраничниках выводить через тег <template> стандартные Card из bootstrap4, параметры заполнять в js файле, где однотипная разметка будет клонироваться, а данные ТОЧЕЧНО обновляться, вот что вышло:
<div class="setup hidden"> <div class="setup-similar"> <div class="setup-similar-list"></div> </div> </div> <template id="similar-wizard-template" style="display: none"> <div class="col"> <div class="card"> <a class="img url" href="<!-- URL1 всплывашка -->"> <img class="imgT alt" src="<!-- # -->" alt="<!--ALT-->"> </a> <div class="card-body"> <a class="url2" href="<!-- URL2 например модальное окно -->"> <h3 class="title">Title</h3> </a> <p class="text"><!--text--></p> </div> </div> </div> </template> js var userDialog = document.querySelector( '.setup' ); userDialog.classList.remove( 'hidden' ); var similarListElement = document.querySelector( '.setup-similar-list' ); var similarWizardTemplate = document.querySelector( '#similar-wizard-template' ) .content .querySelector( '.col' ); for (var i = 0; i < 4; i++) { var wizardElement = similarWizardTemplate.cloneNode(true); similarListElement.appendChild(wizardElement); } var card = [ { title: 'Заголовок 1', text: 'Текс 1', img: 'img/1.jpg', imgT: 'img/1t.jpg', alt: 'Текст 1', url: '#', url2: '#2' }, { title: 'Заголовок 2', text: 'Текс 2', img: 'img/2.jpg', imgT: 'img/2t.jpg', alt: 'Текст 2', url: '#', url2: '#2' }, { title: 'Заголовок 3', text: 'Текс 3', img: 'img/3.jpg', imgT: 'img/3t.jpg', alt: 'Текст 3', url: '#', url2: '#2' }, { title: 'Заголовок 4', text: 'Текс 4', img: 'img/4.jpg', imgT: 'img/4t.jpg', alt: 'Текст 4', url: '#', url2: '#2' } ]; Что-то я нагородил... я понимаю... знаний не хватает, ПОМОГИТЕ ПОЖАЛУЙСТА сделать эту идею рабочей... Очень мало информации по тегу <template> , я так и не понял зачем ещё дописывать: <div class="setup hidden"> <div class="setup-similar"> <div class="setup-similar-list"></div> </div> </div> С JavaScript я только учу...тяжко очень, но учу. 4 й день уже этой идеей болею... Очень хочу чтобы заработало... А не получается, совсем запутался... -- Я думаю что данная идея должна быть полезна многим начинающим веб-мастерам, ведь проще намного будет редактировать сайты без админки. |
Часовой пояс GMT +3, время: 12:13. |