Блог

Главная - Вопросы по программированию - Как вы повторяете похожие элементы несколько раз с разным содержимым, используя Bootstrap?

Как вы повторяете похожие элементы несколько раз с разным содержимым, используя Bootstrap?

#html #jquery #css #bootstrap-4

#HTML #jquery #css #bootstrap-4

Вопрос:

Я создаю веб-сайт со страницей знакомства с командой, и мне сложно писать одни и те же теги и классы абзацев снова и снова. Мне было интересно, есть ли какой-нибудь более быстрый способ сделать это, что-то вроде функции, где я просто ввожу имя и должность человека, и я получаю полностью отформатированное дополнение к HTML. Любая помощь будет оценена!

Я использую Bootstrap 4, если это поможет.

Комментарии:

1. Вы в основном спрашиваете, как работает страница динамического содержимого. Посмотрите на шаблоны на стороне сервера или клиента. Затем все, что вам нужно сделать, это сохранить основные данные команды

2. К сожалению, вам нужно быть немного более конкретным в отношении того, что вы хотите сделать, если вы хотите получить ответ здесь. Если вы делаете это на стороне клиента, это, вероятно, включает в себя массив данных, функцию отображения и innerHTML , но сначала вам нужно попробовать что-то самостоятельно, а затем вернуться сюда, если у вас возникли проблемы.

3. Спасибо всем за помощь! Я постараюсь узнать больше обо всех упомянутых вещах.

4. Извините за это! Возможно, я сделал это случайно; Я хотел принять это и просто изменил его.

Ответ №1:

Используйте JavaScript для создания нескольких HTML-элементов с одним и тем же classList . Теперь вам нужно адаптировать это к вашему контексту:

 const $root = document.getElementById('root')

const data = ["foo", "bar", "naz"]

for (var i = 0; i < data.length; i  ) {
  var newEl = document.createElement('p')
  newEl.classList = 'data-item'
  newEl.innerText = data[i]
  $root.appendChild(newEl)
}  
 .data-item {
    font-family: sans-serif;
}  
 <div id="root"></div>