Javascript-форум - Значение принимается не для всех элементов с нужным стилем

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Значение принимается не для всех элементов с нужным стилем (https://javascript.ru/forum/misc/65809-znachenie-prinimaetsya-ne-dlya-vsekh-ehlementov-s-nuzhnym-stilem.html)

Значение принимается не для всех элементов с нужным стилем

Здравствуйте!

Имеется множество div с определённым стилем. Когда я через js делаю стилю свойство "display: none;", то оно применяется не ко всем div, которые имеют этот стиль. Почему? И как это исправить?

Наверное вы имеете ввиду класс?
Если так, то правила прописанные в классе не имеют силы только в том случае, если ниже в таблице стилей, либо в атрибуте "style" самого элемента, прописаны перекрывающие значения.
Что бы правила прописанные в классе перекрывали и их, можно(хотя и не рекомендуется) добавить "!important":

.class{
    display: none !important;
}

Да, точно, имеется ввиду class.

!Important - я пробовал, там не совсем в этом дело.

Напишу подробнее суть всего действа.

Есть на странице комментарии с разным рейтингом. Каждый div комментария с определённым рейтингом, я пометил своим class. Используя select, хочу при выборе например положительного рейтинга - оставлять на странице только комментарии с положительным рейтингом, остальные скрывать. Если выбирать отрицательные, то показывать отрицательные, а остальные скрывать и т.д.

Я придумал, что мы добавляем к нужному class значение "display: none;", чтобы скрывать ненужные комментарии. А потом возвращать в "display: block;", когда будет сделан такой выбор в select. Но почему-то не работает.

Вот код:

<select onChange="Selected(this)">
  <option value="0" >Все</option>
  <option value="1" >Плюсовые</option>
  <option value="2" >Минусовые</option>
</select>

function Selected(a) {
	var label = a.value;
	if (label==1) {
		document.querySelector('.plus').style.display='block';
		document.querySelector('.minus').style.display='none';
		document.querySelector('.netral').style.display='none';
		
	} else if (label==2) {
		document.querySelector('.plus').style.display='none';
		document.querySelector('.minus').style.display='block';
		document.querySelector('.netral').style.display='none';
		
	} else {
		document.querySelector('.plus').style.display='block';
		document.querySelector('.minus').style.display='block';
		document.querySelector('.netral').style.display='block';
	}
	
}

В итоге, это срабатывает только для одного div. А все остальные не обрабатываются.

https://developer.mozilla.org/ru/doc...erySelectorAll
доку читать между ол и единичным

Так совсем не работает ничего:

<script>
function Selected(a) {
	var label = a.value;
	if (label==1) {
		document.querySelectorAll('.plus').style.display='block';
		document.querySelectorAll('.minus').style.display='none';
		document.querySelectorAll('.netral').style.display='none';
		
	} else if (label==2) {
		document.querySelectorAll('.pluss').style.display='none';
		document.querySelectorAll('.minus').style.display='block';
		document.querySelectorAll('.netral').style.display='none';
		
	} else {
		document.querySelectorAll('.plus').style.display='block';
		document.querySelectorAll('.minus').style.display='block';
		document.querySelectorAll('.netral').style.display='block';
	}
	
}
</script>