Как создать функцию Javascript, в которую она будет вставлять соответствующие значки в HTML?

avatar
KO-d14
8 августа 2021 в 20:42
180
1
-1

Я хочу создать JS-функцию (предпочтительно ванильный JS), где каждый раз, когда я создаю новый div, он будет добавлять соответствующий значок к summary.

Например:

  • При создании новой ЗАМЕТКИ div она прикрепит значок заметки в summary
  • при создании нового ПРЕДУПРЕЖДЕНИЯ div он прикрепит значок предупреждения в summary 

.info{
 background: skyBlue;
 }
 
 .warning{
 color: red; 
  background: pink;
 }
 
 .note{
 background: gold;
 }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 

<div class = " info"> 
<details>
  <summary>Info</summary>
  <p>Some info</p>
</details>
</div> 

<div class = " warning"> 
<details>
  <summary>Warning</summary>
  <p>Notification</p>
</details>
</div> 

<div class = " info"> 
<details>
  <summary>Info</summary>
  <p>Another info</p>
</details>
</div> 

<div class = " note"> 
<details>
  <summary>Note</summary>
  <p>Some note</p>
</details>
</div> 

<hr>
<p> How I want the end result to look </p>

<div class = " info"> 
<details>
  <summary>Info <i class="fas fa-info"></i></summary>
  <p>Some info</p>
</details>
</div> 

<div class = " warning"> 
<details>
  <summary>Warning <i class="fas fa-exclamation-circle"></i></summary>
  <p>Notification</p>
</details>
</div> 

<div class = " info"> 
<details>
  <summary>Info <i class="fas fa-info"></i></summary>
  <p>Another info</p>
</details>
</div> 

<div class = " note"> 
<details>
  <summary>Note <i class="far fa-sticky-note"></i></summary>
  <p>Some note</p>
</details>
</div>
Источник
KO-d14
8 августа 2021 в 21:03
0

Да, ниже моя попытка, но я не был уверен и немного смущен, чтобы показать свой прогресс: let note = document.querySelectorAll(".note"); let sideInfo = document.querySelectorAll(".side-info"); пусть div = document.querySelectorAll ("div"); пусть сводка = документ.querySelectionAll("резюме"); let noteIcon = '<i class="far fa-sticky-note"></i>'; let warning = '<i class="fas fa-exclamation-circle"></i>' function addIcons(){ div.forEach(element){ if (div.classList.contains('note')){ summary. append() } if (div.classList.contains('warning')) summary.append(warning); }

Sean
9 августа 2021 в 12:57
0

Пожалуйста, отредактируйте свой вопрос, чтобы включить этот код — не размещайте длинный код в комментариях.

Ответы (1)

avatar
Daisho Arch
8 августа 2021 в 20:56
1

Имейте cards-container, к которому вы можете добавлять различные карты, и создайте функцию newCard, чтобы фактически создавать элементы, которые вы будете добавлять.

const classes = {
  note: 'far fa-sticky-note',
  info: 'fas fa-info',
  warning: 'fas fa-exclamation-circle'
}

const container = document.querySelector('.cards-container')

function newCard(type, content) {
  const cardDiv = document.createElement('div')
  cardDiv.classList = `card ${type}`
  cardDiv.innerHTML = `
    <details>
      <summary>${type[0].toUpperCase()}${type.slice(1).substring(0)} <i class="${classes[type]}"></i></summary>
      <p>${content}</p>
    </details>`
  container.appendChild(cardDiv)
}

newCard('info', 'dis be a cool info')
newCard('warning', 'warning. danger! danger!')
.info{
 background: skyBlue;
 }
 
 .warning{
 color: red; 
  background: pink;
 }
 
 .note{
 background: gold;
 }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 

<div class="cards-container">
</div>

С помощью следующего кода вы можете добавить значки к уже существующим картам.

Вы можете выбрать все "карты" (каждой карте дается имя класса card) элементы и добавить соответствующий значок к их сводке, изменив innerHTML сводки.

const classes = {
  note: 'far fa-sticky-note',
  info: 'fas fa-info',
  warning: 'fas fa-exclamation-circle'
}

const cards = [...document.querySelectorAll('.card')]

cards.map(el => el.querySelector('summary').innerHTML += " <i class=\"" + classes[el.classList[1]] + "\"></i>")
.info{
 background: skyBlue;
 }
 
 .warning{
 color: red; 
  background: pink;
 }
 
 .note{
 background: gold;
 }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 

<div class = "card info"> 
<details>
  <summary>Info</summary>
  <p>Some info</p>
</details>
</div> 

<div class = "card warning"> 
<details>
  <summary>Warning</summary>
  <p>Notification</p>
</details>
</div> 

<div class = "card info"> 
<details>
  <summary>Info</summary>
  <p>Another info</p>
</details>
</div> 

<div class = "card note"> 
<details>
  <summary>Note</summary>
  <p>Some note</p>
</details>
</div>
KO-d14
8 августа 2021 в 21:29
0

Привет Дайсё, Спасибо за ваше терпение и ответ на мой вопрос! Мне действительно понравилась первая функция, которую вы создали перед редактированием, поскольку она была короткой и понятной (не нуждалась в каких-либо операторах if, добавлении и т. д.). Если я могу спросить, есть ли причина, по которой было внесено редактирование? :0

Daisho Arch
8 августа 2021 в 21:38
1

@ KO-d14 Это более динамичный подход к добавлению целых компонентов карты из функции, а не просто добавление к уже существующим картам. Но конечно, я добавлю предыдущий ответ к этому

KO-d14
8 августа 2021 в 21:48
1

Я понимаю! Спасибо за разъяснение, а также за правку, я хотел понять логику созданных вами функций. :) Мне очень понравились два разных подхода, которые вы создали для разных ситуаций!