Как скрыть все элементы кроме одного?

Question

Имею такие элементы

<button data-modal="1">1</button>
<button data-modal="1">2</button>

<div class="modal" id="1"></div>
<div class="modal" id="2"></div>

По умолчанию у меня все .modal display none, хочу при клике скрывать все modal, а то которое открыл display block Как такое сделать? В jQuery знаю есть not() а как в js это сделать?

Answer 1

Если тебе не особо хочется, можешь по-извращаться:

Array.from(document.body.children).map(item => item.getAttribute("id") == 1 ? item.setAttribute("style", "opacity: 1") : item.setAttribute("style", "opacity: 0"))

Для начала нам нужно понять Parent компонент наших элементов.
Children нашего элемента (Element.children) нужно переопределить Object to Array: итерируемого объекта
Потом мы можем пробежать данный элемент (map) и найти нужные элементы по Id или другим атрибутам (Element.getAttribute).
При нахождении ненужного, просто отключаем, например (opacity)

Answer 2

function select(id) {
  document.querySelectorAll(`div.modal`).forEach((dialog) => {
    dialog.hidden = !(id == dialog.id);
  });
}

//#region FOR DEMO ONLY
select(document.querySelector(`input[type="radio"][name="modals"]:checked`).value);
document.querySelectorAll(`input[type="radio"][name="modals"]`).forEach((input) => {
  input.addEventListener(`change`, (event) => {
    select(input.value);
  })
})
//#endregion

<input type="radio" name="modals" value="first"> Show first modal<br>
<input type="radio" name="modals" value="second"> Show second modal<br>
<input type="radio" name="modals" value="third"> Show third modal<br>
<input type="radio" name="modals" value="" checked> Hide all<br>
<div id="first" class="modal">First modal</div>
<div id="second" class="modal">Second modal</div>
<div id="third" class="modal">Third modal</div>

БЛОГ НА HUSL

Как скрыть все элементы кроме одного?

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