БЛОГ НА HUSL


При выборе блока по id, должен открыть другой блок

Автор вопроса: Uman

Всем привет, при клике на любую букву, появляется подсказка только для буквы Н, у первого списка есть id, это где буквы, у второго списка id нету, если добавить id, то как их потом сравнивать, чтобы при выборе появлялась правильная подсказка!

js

const listGroup = document.querySelector('.list-group');
const hiddenWord = document.querySelector('.hidden-word');
const visibleItemLi = document.querySelector('.li-item');
const task = document.querySelector('.task');

listGroup.addEventListener('click', function (e) {
    e.target.closest('.task').classList.add('hidden-word');
    visibleItemLi.classList.add('visible-li-item');
});

function close() {
  task.classList.remove('hidden-word');
  visibleItemLi.classList.remove('visible-li-item');
}

пример для удобства


Источник

Ответы (2 шт):

Автор решения: Александр Сычёв

Исходя из вашей структуры html можно сделать как-то так: Id сделал с нуля. Вроде все просто, если не понятно - пишите

const listGroup = document.querySelector('.list-group');
const visibleItemLi = document.querySelectorAll('.li-item');

listGroup.addEventListener('click', ({
  target
}) => {
  if (target.classList.contains('task')) { //  проверяем что клик был именно на task
    target.classList.add('hidden-word') //  добавляем класс
    visibleItemLi[target.id].classList.add('visible-li-item') // скрываем букву
  }
})

function closes(event) {
  const item = event.target.closest('.li-item') //  находим родителя
  item.classList.remove('visible-li-item') //  удаляем класс

  const list = listGroup.querySelector('.hidden-word') //  находим по классы скрытую букву
  list.classList.remove('hidden-word') //  удаляем класс
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto;
  list-style: none;
}

.list-group {
  display: flex;
}

.list-group-item {
  background-color: #EEE;
  cursor: pointer;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #CCC;
  line-height: 30px;
  margin: 2px;
}

.list-group-item:hover {
  background-color: #FFF;
}

.hidden-word {
  visibility: hidden;
}

.visible-word {
  visibility: visible;
}

.li-item {
  display: flex;
  background-color: #EEE;
  width: 300px;
  height: 30px;
  text-align: center;
  border: 1px solid #CCC;
  line-height: 30px;
}

.hidden-li-item {
  visibility: hidden;
}

.visible-li-item {
  visibility: visible;
}

.closed {
  margin-top: -7px;
  margin-left: 20px;
  padding: 5px;
  cursor: pointer;
  color: #ff0000;
}
<ul class="list-group">
  <li class="list-group-item task" id="0">Н</li>
  <li class="list-group-item task" id="1">А</li>
  <li class="list-group-item task" id="2">З</li>
  <li class="list-group-item task" id="3">В</li>
  <li class="list-group-item task" id="4">А</li>
  <li class="list-group-item task" id="5">Н</li>
  <li class="list-group-item task" id="6">И</li>
  <li class="list-group-item task" id="7">Я</li>
  </li>

  <ul>
    <li class="li-item hidden-li-item">Опа открылась буква Н
      <div class="closed" onclick="closes(event)">x</div>
    </li>
    <li class="li-item hidden-li-item">Опа открылась буква А
      <div class="closed" onclick="closes(event)">x</div>
    </li>
    <li class="li-item hidden-li-item">Опа открылась буква З
      <div class="closed" onclick="closes(event)">x</div>
    </li>
    <li class="li-item hidden-li-item">Опа открылась буква В
      <div class="closed" onclick="closes(event)">x</div>
    </li>
    <li class="li-item hidden-li-item">Опа открылась буква А
      <div class="closed" onclick="closes(event)">x</div>
    </li>
    <li class="li-item hidden-li-item">Опа открылась буква Н
      <div class="closed" onclick="closes(event)">x</div>
    </li>
    <li class="li-item hidden-li-item">Опа открылась буква И
      <div class="closed" onclick="closes(event)">x</div>
    </li>
    <li class="li-item hidden-li-item">Опа открылась буква Я
      <div class="closed" onclick="closes(event)">x</div>
    </li>
  </ul>
</ul>

Чтобы найти несколько элементов, нужно использовать querySelectorAll

P.S: не учитывая id

Пример прокомментировал - должно быть понятно:

Момент data-letter делайте уникальным при выведение данных на страницу

const listGroup = document.querySelector('.list-group')
const list = [...listGroup.querySelectorAll('.task')]
const out = document.querySelector('.out')

function popap(text, data) {
  const str = `<div class="li-item hidden-li-item visible-li-item" data-popap='${data}'>Опа открылась буква ${text}
            <p class="closed" onclick="closes(event)">x</p>
            </div>` //  составляем шаблон подсказки
  out.insertAdjacentHTML('beforeend', str) //  вставляем в DOM
}

listGroup.addEventListener('click', ({
  target
}) => {
  if (target.classList.contains('task')) { //  проверяем что клик был именно на task
    target.classList.add('hidden-word') //  добавляем класс
    const text = target.textContent //  запиываем букву
    const dataset = target.dataset.letter //  запиываем dataset
    popap(text, dataset) //  вызываем функцию
  }
})

function closes(event) {
  const item = event.target.closest('.li-item') //  находим родителя
  const itemPopap = item.dataset.popap //  запиываем dataset
  item.remove() //  удаляем элемент из DOM
  const search = list.find(item => item.dataset.letter === itemPopap) //  ищем одинаковый dataset
  search.classList.remove('hidden-word') //  удаляем класс
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto;
  list-style: none;
}

.list-group,
.wrapper {
  display: flex;
}

.list-group-item {
  background-color: #EEE;
  cursor: pointer;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #CCC;
  line-height: 30px;
  margin: 2px;
}

.list-group-item:hover {
  background-color: #FFF;
}

.hidden-word {
  visibility: hidden;
}

.visible-word {
  visibility: visible;
}

.li-item {
  display: flex;
  background-color: #EEE;
  width: 300px;
  height: 30px;
  text-align: center;
  border: 1px solid #CCC;
  line-height: 30px;
}

.hidden-li-item {
  visibility: hidden;
}

.visible-li-item {
  visibility: visible;
}

.closed {
  margin-top: -7px;
  margin-left: 20px;
  padding: 5px;
  cursor: pointer;
  color: #ff0000;
}
<div class="wrapper">
  <ul class="list-group">
    <li class="list-group-item task" data-letter="1">Н</li>
    <li class="list-group-item task" data-letter="2">А</li>
    <li class="list-group-item task" data-letter="3">З</li>
    <li class="list-group-item task" data-letter="4">В</li>
    <li class="list-group-item task" data-letter="5">А</li>
    <li class="list-group-item task" data-letter="6">Н</li>
    <li class="list-group-item task" data-letter="7">И</li>
    <li class="list-group-item task" data-letter="8">Я</li>
  </ul>
  <div class="out"> </div>
</div>

→ Ссылка
Автор решения: Andrei

Можно сделать вот так что-бы не ломать голову с множеством id:

const LG = document.querySelector("#list-group");
const LInfo = document.querySelector("#list-info");

LG.addEventListener('click', e => {
  if (document.querySelector('#li-info'))
    closes();
  const LI = document.createElement('LI');
  LI.setAttribute('class', 'edit-task');
  LI.setAttribute('id', 'li-info');
  const DV = document.createElement('DIV');
  DV.setAttribute('class', 'edit-task');
  const DVC = document.createElement('DIV');
  DVC.setAttribute('class', 'closed');
  DVC.setAttribute('onclick', 'closes()');
  DVC.append('x');
  DV.append(`Опа открылась буква ${e.target.textContent}`);
  DV.append(DVC);
  LI.append(DV);
  LInfo.append(LI);
});

function closes() {
  document.querySelector('#li-info').remove();
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Roboto;
  list-style: none;
}

.list-group {
  display: flex;
}

.list-group-item {
  background-color: #EEE;
  cursor: pointer;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 1px solid #CCC;
  line-height: 30px;
  margin: 2px;
}

.list-group-item:hover {
  background-color: #FFF;
}

.hidden-word {
  visibility: hidden;
}

.visible-word {
  visibility: visible;
}

.edit-task {
  display: flex;
  background-color: #EEE;
  width: 300px;
  height: 30px;
  text-align: center;
  border: 1px solid #CCC;
  line-height: 30px;
}

.hidden-li-item {
  visibility: hidden;
}

.visible-li-item {
  visibility: visible;
}

.closed {
  margin-top: -7px;
  margin-left: 20px;
  padding: 5px;
  cursor: pointer;
  color: #ff0000;
}
<ul class="list-group" id="list-group">
  <li class="list-group-item task">Н</li>
  <li class="list-group-item task">А</li>
  <li class="list-group-item task">З</li>
</ul>

<ul id="list-info"></ul>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.