Как на чистом JS отобрать HTML элементы по определенным признакам?

Question

[ifap]

Имеем такой HTML:

<input type="radio" onclick="select1()">
<input type="radio" onclick="select2()">
<input type="radio" onclick="select3()">

<div id="box">
content
	<div class="a"></div>
	<div class="a"></div>
	<div class="a"></div>

	<div class="b"></div>
	<div class="b"></div>
	<div class="b"></div>

	<div class="c"></div>
	<div class="c"></div>
	<div class="c"></div>
</div>

Задача сделать средствами чистого JS так, чтобы select1 скрывал все DIV внутри DIV#box, кроме DIV.a и присваивал им aria-hidden:true, select2 – то же самое, кроме DIV.b, select3 – то же самое, кроме DIV.c

И вот весь StacksOverflow с MDN перерыл – не выходит каменный цветок :(

Блоков много, присваивать им ID и перечислять поименно – так себе затея. Классов мало – их можно перечислить поименно при необходимости.

Есть идеи по рабочему коду?

Comments

[szQocks]

3 класса в css

1 класс = чтобы select1 скрывал все DIV внутри DIV.box, кроме DIV.a
2 класс = то же самое, кроме DIV.b
3 класс = то же самое, кроме DIV.c

и просто менять классы у id="box" при изменени radio

ну и при radio логику с aria-hidden дописать в js

ну или даже без классов тупо получить через селекторы всё что нужно и средствами js пробегаться по элементам и делать то что нужно

[Tishaa]

ответ написал, а для ари хиден сделай присвение атрибута по классу
b.setAttribute("aria-hidden", "true")
c.setAttribute("aria-hidden", "true")

[ifap]

szQocks, а вот это наверное самый простой вариант, спасибо, попробую!

Answer 1

[Ivan Ustûžanin]

0. причём здесь MSDN?
1. DIV.box не существует в указанной разметке, но существует div#box
2. для каждой радиокнопки (которая не обязательно должна быть именно радиокнопкой) делается свой вариант onclick="select('div#box', 'div.a')"
3. select() пишется элементарно:

function select(where, what) {
  for (const node of document.querySelectorAll(`${where} > :not(${what})`)) {
    node.setAttribute('aria-hidden', 'true');
    // то, что подразумевается под "скрывал"
  }
  for (const node of document.querySelectorAll(`${where} > ${what}`)) {
    node.removeAttribute('aria-hidden');
    // обратное тому, что подразумевается под "скрывал"
  }
}

4. если разметка такая, то всё теоретически можно сделать и на CSS без JS, но это уже другая история

после переименования select() в selectOne() всё работает — написанные строкой через атрибуты обработчики ЕМНИП имеют сам элемент как ближайший resolving-scope — тело как бы обёрнуто в with (this) { ... }, а у <input> есть свой select():

Comments

[historydev]

0. причём здесь MSDN?

)))

[ifap]

Спасибо за указание на опечатки, исправил. Не фурычит https://ifap.ru/test.htm ЧЯДНТ?

А с CSS в какую сторону рыть?

[Ivan Ustûžanin]

ifap, похоже, что название функции "select", после переименования в "selectOne" оно работает: https://codepen.io/Ivan-U7n/pen/ZYzOeKJ

ПЛЮС: ЕМНИП написанное текстом в on* выполняется в весьма хитром контексте, и в результате вызывается select() у input, а не глобальная функция

[Ivan Ustûžanin]

ifap, а с CSS вместо вызова функции добавляется data-select атрибут с соответствующим значением, а потом пишется портянка вида:

div#box > div { /* hide */ }
[type=radio][data-select=a]:checked ~ div#box > div.a,
[type=radio][data-select=b]:checked ~ div#box > div.b,
[type=radio][data-select=c]:checked ~ div#box > div.c
{ /* show */ }

но атрибуты так не присвоишь, так что ИМХО лучше остановиться на JS решении

[ifap]

Ivan Ustûžanin, спасибо, это наиболее элегантное решение, которое мне и в голову не пришло. Скрипт в моем случае лучше, т.к. за кадром там еще много шаманства, включая постановку/снятие required, но вариант с чистым CSS все равно покурю для общего развития.

[ifap]

Ivan Ustûžanin, правильно ли я понимаю, что это работает только с прямыми потомками одного и того же родителя? Т.е. если я заверну input'ы в один div, а скрываемые/показываемые div - в другой div, то фокус уже не сработает, несмотря на то, что все вместе они обернуты в общий div, на который я могу явно указать селектором?

Т.е. вот такая конструкция уже не сработает?

<div id=main>

	<div id=select>
	<input type="radio" value="a">
	<input type="radio" value="b">
	</div>

	<div id=content>
	<div class="a">a</div>
	<div class="a">aa</div>

	<div class="b">b</div>
	<div class="b">bb</div>
	</div>

</div>

[Ivan Ustûžanin]

ifap, да, решение писалось для предоставленной разметки
однако, если указывать в вызове функции #content, а не #main то и с такой разметкой заработает
ну или убрать > в селекторах в функции

[ifap]

Ivan Ustûžanin, да вот же - не работает... или ЧЯДНТ?

<style type="text/css">
div#main div div {display: none}
input[value="a"]:checked ~ div#content div.a {display: block}
input[value="b"]:checked ~ div#content div.b {display: block}
</style>




<div id=main>

	<div id=select>
	<input type="radio" value="a" name="sel">
	<input type="radio" value="b" name="sel">
	</div>

	<div id=content>
	<div class="a">a</div>
	<div class="a">aa</div>

	<div class="b">b</div>
	<div class="b">bb</div>
	</div>

</div>

[Ivan Ustûžanin]

ifap, а-а-а, речь была про css, там всё сложнее и только через :has()

#content > div {display: none}
#select:has(input[value="a"]:checked) ~ #content > .a {display: block}
#select:has(input[value="b"]:checked) ~ #content > .b {display: block}

[ifap]

Ivan Ustûžanin, вах, шайтан! А я был уверен, что это невозможно ;) Только первая скобка лишняя:
#select:(has

Answer 2

[Сергей Соколов]

Примерно так можно:
- при клике передавать имя класса, и всего один общий обработчик
- перечислить все классы, чтобы выбранный включать, а остальные выключать

Answer 3

[Tishaa]

и так же для остальных select

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")
    }

Comments

[ifap]

Это только для первого найденного элемента, соответствующего условию, работает

[Tishaa]

всмысле? так пропиши каждой радио кнопке, свою функцию и будет у тебя всё работать как ты хотел

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")
    }
function select2(){
        a.style.display = "none"
        c.style.display = "none"
        a.setAttribute("aria-hidden", "true")
        c.setAttribute("aria-hidden", "true")
    }
function select3(){
        a.style.display = "none"
        b.style.display = "none"
        a.setAttribute("aria-hidden", "true")
        b.setAttribute("aria-hidden", "true")
    }

вот целиком js код

[Ivan Ustûžanin]

Tishaa,

всмысле?

в прямом смысле: этот код обработает только первый элемент подходящий под селектор (или свалится, если селектор ничего не найдёт), ибо .querySelector() возвращает первый найденный элемент или null

таким образом, приведённый ответ неверен, т.к. не решает поставленную задачу