Почему игнорирует класс

@sergei2210 · Регистрация: 07.04.2016

Студворк — интернет-сервис помощи студентам

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
* {
box-sizing: border-box;
}
.my_input {
    background-image: url('/css/searchicon.png');
    background-position: 10px 12px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}
.my_ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.my_ul a {
    border: 1px solid #ddd;
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    color: black;
    display: none;
}
.my_ul a:hover:not(.header) {
background-color: #eee;
}
.show{
    display: block;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<input type="text" class="my_input" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul class="my_ul">
    <li><a href="#">Adele</a></li>
    <li><a href="#">Agnes</a></li>
 
    <li><a href="#">Billy</a></li>
    <li><a href="#">Bob</a></li>
 
    <li><a href="#">Calvin</a></li>
    <li><a href="#">Christina</a></li>
    <li><a href="#">Cindy</a></li>
</ul>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
function myFunction() {
var input, filter, ul, li, a, i;
input = document.querySelector(".my_input");
filter = input.value.toUpperCase();
ul = document.querySelector(".my_ul");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].classList.add("show");
} else {
li[i].style.display = "none";
 
}
}
}
</script>

У меня добавляется класс show но блок не становится видимым все равно, хотя он написан ниже и как бы приоритетнее.

@DrType · 25.03.2020, 14:35

У Вас в 27 строке CSS для .my_ul a, то есть для ссылок в пунктах списка задан display:none. Скрипт добавляет класс show пунктам списка, но не ссылкам. Надо либо в CSS скрыть пункты, либо в JS добавлять класс ссылкам.
По-моему, в этом проблема.

@sergei2210 · 25.03.2020, 14:43 **[ТС]**

Сообщение от DrType

Надо либо в CSS скрыть пункты, либо в JS добавлять класс ссылкам.
По-моему, в этом проблема.

Я не знаю как это сделать, подскажите пожалуйста.

@DrType · 25.03.2020, 15:13

CSS
1
2
3
4
5
6
7
8
9
10
li{display:none}
.my_ul a {
    border: 1px solid #ddd;
    margin-top: -1px; /* Prevent double borders */
    background-color: #f6f6f6;
    padding:12px;
    text-decoration: none;
    font-size: 18px;
    color: black;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function myFunction() {
var input, filter, ul, li, a, i;
input = document.querySelector(".my_input");
filter = input.value.toUpperCase();
ul = document.querySelector(".my_ul");
li = ul.getElementsByTagName("li");
for(let l of li){l.classList.remove('show')};
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (filter.length&&a.innerHTML.toUpperCase().indexOf(filter) > -1 /*не лучше ли регулярку написать?*/) {
li[i].classList.add("show");
}}};
//document.querySelector(".my_input").addEventListener('input', myFunction)

К сожалению, если в CSS задать display:none для селектора .my_ul li, то код не сработает — специфичность селекторов помешает. Так что лучше с классами не возиться, а задавать свойства стилевого атрибута.

@j2FunOnly · 26.03.2020, 08:49

sergei2210, вам DrType правильно сказал, вы не тому элементу устанавливаете класс .show. Странно, конечно, что у вас скрыты не элементы списка, а их содержимое.

Но это не всё - дальше вы элементам прописываете атрибут (а такой имеет высший приоритет в стилях) li[i].style.display = "none"; и нигде этот атрибут не убираете - вот и всё, у вас элементы всегда не отображаются.

Даже если вы исправите код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  function myFunction() {
    var input, filter, ul, li, a, i;
 
    input = document.querySelector(".my_input");
    filter = input.value.toUpperCase();
    ul = document.querySelector(".my_ul");
    li = ul.getElementsByTagName("li");
 
    for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
 
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        // li[i].classList.add("show");
        a.classList.add('show');
      } else {
        // li[i].style.display = "none";
        a.classList.remove('show');
      }
    }
  }

И элементам .my_ul a добавите класс show, то правило всё равно не сработает, т. к. есть понятие специфичность правил CSS и .my_li a будет "весомее" для браузера чем .show. Надо исправить правило - сделать его "более специфичным":

CSS
1
2
3
.my_ul a.show {
  display: block;
}

Ну или в крайнем случае

CSS
1
2
3
.show {
  display: block !important;
}

Новые блоги и статьи Все статьи Все блоги /
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .

Почему игнорирует класс

Решение

Решение

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	25.03.2020, 14:35
	У Вас в 27 строке CSS для `.my_ul a`, то есть для ссылок в пунктах списка задан `display:none`. Скрипт добавляет класс show пунктам списка, но не ссылкам. Надо либо в CSS скрыть пункты, либо в JS добавлять класс ссылкам. По-моему, в этом проблема. 0