Как с помощью чистого JavaScript выбрать HTML элементы по заданным критериям? 

Как можно реализовать на чистом JavaScript функциональность, при которой при выборе радио-кнопки `select1` скрываются все `<div>` внутри `<div id="box">`, кроме `<div class="a">`, с присвоением им атрибута `aria-hidden="true"`? Аналогично, для `select2` скрывать все `<div>`, кроме `<div class="b">`, и для `select3` скрывать все, кроме `<div class="c">`? <br/> <br/> Я исследовал множество ресурсов, включая StackOverflow и MSDN, но пока не смог добиться нужного результата. <br/> <br/> Учитывая, что блоков много, присваивать им уникальные ID и упоминать их поименно не очень удобно. Каковы ваши рекомендации по созданию рабочего кода?
  • 9 декабря 2024 г. 22:23
Ответы на вопрос 3 
Вы можете реализовать нужную функциональность с помощью чистого JavaScript, используя обработчики событий для радио-кнопок и методы для манипуляции с элементами. Вот пример кода, который выполняет описанные вами задачи:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Скрытие элементов</title>
    <style>
        .hidden {
            display: none; /* Скрытие элементов с помощью CSS */
        }
    </style>
</head>
<body>

<label>
    <input type="radio" name="select" value="select1"> Выбор 1
</label>
<label>
    <input type="radio" name="select" value="select2"> Выбор 2
</label>
<label>
    <input type="radio" name="select" value="select3"> Выбор 3
</label>

<div id="box">
    <div class="a">Элемент A</div>
    <div class="b">Элемент B</div>
    <div class="c">Элемент C</div>
    <div class="d">Элемент D</div>
</div>

<script>
    const radioButtons = document.querySelectorAll('input[name="select"]');
    const box = document.getElementById('box');

    radioButtons.forEach(radio => {
        radio.addEventListener('change', () => {
            const selectedValue = radio.value;

            // Откроем все divы и уберем атрибут aria-hidden
            const divs = box.querySelectorAll('div');
            divs.forEach(div => {
                div.classList.remove('hidden');
                div.setAttribute('aria-hidden', 'false');
            });

            // Применяем скрытие на основе выбранного радио
            let classToShow = '';
            if (selectedValue === 'select1') {
                classToShow = 'a';
            } else if (selectedValue === 'select2') {
                classToShow = 'b';
            } else if (selectedValue === 'select3') {
                classToShow = 'c';
            }

            divs.forEach(div => {
                if (div.className !== classToShow) {
                    div.classList.add('hidden');
                    div.setAttribute('aria-hidden', 'true');
                }
            });
        });
    });
</script>

</body>
</html>
```

### Как работает код:
1. **HTML Структура**: Мы создаем три радио-кнопки для выбора и блок `div` с несколькими подэлементами, которые нужно скрывать и показывать.

2. **CSS**: Используется класс `.hidden`, который устанавливает `display: none;` для скрытия элементов.

3. **JavaScript**:
   - Сначала выбираем все радио-кнопки по имени и находим контейнер `div` с id `box`.
   - Поскольку они имеют одно имя, добавляем обработчик события `change` для каждого радио-баттона. 
   - При срабатывании события:
     - Мы сначала показываем все `div` внутри контейнера `box` и убираем атрибут `aria-hidden`.
     - В зависимости от выбранного радио-кнопки мы определяем, какой класс нужно показать (`a`, `b` или `c`).
     - Скрываем все `div`, кроме одного, на который указывает выбранный вариант, присваивая им атрибут `aria-hidden="true"`.

### Обратите внимание:
Вы можете легко расширить эту логику, добавляя новые классные элементы и соответствующие радио-кнопки, просто добавив новые условия в JavaScript.
и так же для остальных select <br/> <pre><code class="javascript">let a = document.querySelector('.a');
    let b = document.querySelector('.b');
    let c = document.querySelector('.c');
    function select1(){
        b.style.display = "none"
        c.style.display = "none"
        b.setAttribute("aria-hidden", "true")
        c.setAttribute("aria-hidden", "true")
    }</code></pre>
0. причём здесь MSDN? <br/> 1. <code>DIV.box</code> не существует в указанной разметке, но существует <code>div#box</code> <br/> 2. для каждой радиокнопки (которая не обязательно должна быть именно радиокнопкой) делается свой вариант <code>onclick="select('div#box', 'div.a')"</code> <br/> 3. <code>select()</code> пишется элементарно: <br/> <pre><code class="javascript">function select(where, what) {
  for (const node of document.querySelectorAll(`${where} &gt; :not(${what})`)) {
    node.setAttribute('aria-hidden', 'true');
    // то, что подразумевается под "скрывал"
  }
  for (const node of document.querySelectorAll(`${where} &gt; ${what}`)) {
    node.removeAttribute('aria-hidden');
    // обратное тому, что подразумевается под "скрывал"
  }
}</code></pre> <br/> 4. если разметка такая, то всё теоретически можно сделать и на CSS без JS, но это уже другая история
Похожие вопросы
    Показать ещё