AnswerBun.com

Вставка записанного результата в

Stack Overflow на русском Asked by Quick Brown Fox on July 23, 2020

Имеется код генерации табов на JS. Как сделать так, чтобы при вставке в блок результата, каждый из списка элементов оборачивался бы в <li>?

let letters = [];

const itemList = [];

document.querySelectorAll('.productdetails li').forEach((el, i) => {

  const letter = el.innerText.split(' ')[1][0];

  letters.push(letter);

  letters = [...new Set(letters)];

  itemList.push({
    id: i,
    content: el.innerHTML,
    letter: letter
  });

  document.querySelector('.results .tabs').innerHTML =
    letters.map(el => {
      return `<li>${el}</li>`
    });

});

document.querySelectorAll('.tabs li').forEach(tab => {
  tab.onclick = (e) => {
    document.querySelector('.results .content').innerHTML =
      itemList.filter(item => item.letter === e.target.innerText).map(item => item.content);
    const pd = document.querySelector(".productdetails")
    if (pd) {pd.remove()}
  }

});
.results {
  border: 2px solid black;
}

.results .tabs li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.productdetails {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1000;
}
<div class="results">
  <ul class="tabs"></ul>
  <ul class="content"></ul>
</div>


<ul class="productdetails">


  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок A</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок B</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок C</h3>

  </li>
</ul>

One Answer

Вы можете воспользоваться шаблонными строками для того что бы упростить композицию требуемого результата:

let letters = [];

const itemList = [];

document.querySelectorAll('.productdetails li').forEach((el, i) => {

  const letter = el.innerText.trim().split(' ')[1];

  letters.push(letter);

  letters = [...new Set(letters)];

  itemList.push({
    id: i,
    content: el.innerHTML,
    letter
  });

  const lettersMap = letters.map(el => {
      return `<li>${el}</li>`
  });

  document.querySelector('.results .tabs').innerHTML = lettersMap.join('')

});

document.querySelectorAll('.tabs li').forEach(tab => {
  tab.onclick = (e) => {
    document.querySelector('.results .content').innerHTML =
      itemList.filter(item => item.letter === e.target.innerText).map(item => `<li>${item.content}</li>`);
    const pd = document.querySelector(".productdetails")
    if (pd) {
      pd.remove()
    }
  }

});
.results {
  border: 2px solid black;
}

.results .tabs li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.productdetails {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1000;
}
<div class="results">
  <ul class="tabs"></ul>
  <ul class="content"></ul>
</div>


<ul class="productdetails">


  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок A</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок B</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок C</h3>

  </li>
</ul>

Correct answer by Vasily on July 23, 2020

Add your own answers!

Related Questions

StatusBar белый в Android 6.0

1  Asked on November 30, 2021 by modal

   

Syntax error: end of file unexpected

2  Asked on November 30, 2021

   

Код ответа 204 приводит к ошибке

1  Asked on November 27, 2021 by mccrack

         

Анимация SVG стрелки

1  Asked on November 27, 2021

       

Наследование в шаблонах twig не работает

0  Asked on November 27, 2021 by antony-lapitskiy

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP