Объясните, как работает код?

Question

Объясните, как работает JS код при выборе пункта в выпадающем списке и отображении соответствующего блока. Может возможно этот код сделать более простым к понимаю?

Так же вопросы :

что за конструкция .fruits > div? Это так задаются свойства всем дивам в диве?

document.querySelector('select').addEventListener('change', e => {
  const className = `${e.target.value}-info`;
  document.querySelectorAll('.fruits > div').forEach(n => {
    n.classList.toggle('visible', n.classList.contains(className));
  });
});

.fruits > div {
  display: none;
}

.fruits > div.visible {
  display: block;
}

<select>
  <option value="apple">Яблоко</option>
  <option value="orange">Апельсин</option>
</select>

<div class="fruits">
  <div class="apple-info">
  <h1>Яблоко</h1>
  <img src="https://static9.depositphotos.com/1011549/1208/i/950/depositphotos_12089121-stock-photo-green-apple-with-leaf.jpg" alt="">
  </div>

  <div class="orange-info">
  <h1>Апельсин</h1>
  <img src="https://befreshcorp.net/wp-content/uploads/2017/07/product-packshot-Orange.jpg" alt="">
  </div>
</div>

БЛОГ НА HUSL

Объясните, как работает код?

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