Живой фильтр по набранной букве, почему этот код не работает?
let search = document.getElementById('search')
let allElements = document.querySelectorAll('.ClientsCard')
// 2. устанавливаем обработчик на поле ввода
search.addEventListener('input', function() {
parseElements(this.value)
})
// 3. функция поиска по элементам
const parseElements = function(text) {
return allElements.forEach(function(element) {
if ((element.innerText.toLowerCase() + "").indexOf(text.toLowerCase()) != -1) {
element.classList.remove('hide')
} else {
element.classList.add('hide')
}
return element
});
}
.hide {
display: none;
}
.tres2 {
border: solid 1px #148051;
}
.tres {
border: solid 1px #f4faff;
background: #148051;
color: white;
}
.tre {
line-height: 3rem;
}
.ClientsGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
@media (max-width: 999px) {
.ClientsGrid {
grid-template-columns: repeat(4, 1fr);
}
}
.ClientsCard {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
text-align: center;
box-shadow: var(--mainBoxShadow);
border: solid 1px lightgrey;
margin-bottom: 10px;
}
.ClientsCard__img {
margin-bottom: 30px;
width: 128px;
height: 64px;
}
.ClientsCard__img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ClientsCard__a {
text-decoration: none;
color: var(--blue);
transition: all 0.25s;
}
.ClientsCard__p {
margin-top: 15px;
}
Маска для поиска:
<input type="text" id='search' />
<div class="row">
<div class="ClientsGrid">
<div class="ClientsCard">AT
<a style="text-decoration:none;" target="_blank" href="/partners/at/">
<div class="ClientsCard__img">
<img alt="AT" title="AT" src="/media/CACHE/images/images_partners/_autotechgroup/8cbf94820a9b1a58b87698312a096f33.jpg">
</div>
</a> <a target="_blank" rel="nofollow" class="ourClientsCard__a" href="https://autotechgroup.ru/">https://autotechgroup.ru/</a>
<p class="ClientsCard__p">
AT </p>
</div>
<div class="ClientsCard">Starline
<a style="text-decoration:none;" target="_blank" href="/partners/starline/">
<div class="ClientsCard__img">
</div>
</a> <a target="_blank" rel="nofollow" class="ourClientsCard__a" href=""></a>
<p class="ClientsCard__p">
Starline </p>
</div>
</div>
</div>
Ответы (1 шт):
Автор решения: Grundy
→ Ссылка
Если посмотреть какие стили применяются к элементу
Можно заметить, что стиль от hide
перекрывается стилем от ClientsCard
Это происходит из-за того, что класс hide
описан ДО класса ClientsCard
.
Для решения достаточно перенести его описание после, либо добавить !important
let search = document.getElementById('search')
let allElements = document.querySelectorAll('.ClientsCard')
// 2. устанавливаем обработчик на поле ввода
search.addEventListener('input', function() {
parseElements(this.value)
})
// 3. функция поиска по элементам
const parseElements = function(text) {
return allElements.forEach(function(element) {
if ((element.innerText.toLowerCase() + "").indexOf(text.toLowerCase()) != -1) {
element.classList.remove('hide')
} else {
element.classList.add('hide')
}
return element
});
}
.tres2 {
border: solid 1px #148051;
}
.tres {
border: solid 1px #f4faff;
background: #148051;
color: white;
}
.tre {
line-height: 3rem;
}
.ClientsGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 20px;
}
@media (max-width: 999px) {
.ClientsGrid {
grid-template-columns: repeat(4, 1fr);
}
}
.ClientsCard {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
text-align: center;
box-shadow: var(--mainBoxShadow);
border: solid 1px lightgrey;
margin-bottom: 10px;
}
.ClientsCard__img {
margin-bottom: 30px;
width: 128px;
height: 64px;
}
.ClientsCard__img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ClientsCard__a {
text-decoration: none;
color: var(--blue);
transition: all 0.25s;
}
.ClientsCard__p {
margin-top: 15px;
}
.hide {
display: none;
}
Маска для поиска:
<input type="text" id='search' />
<div class="row">
<div class="ClientsGrid">
<div class="ClientsCard">AT
<a style="text-decoration:none;" target="_blank" href="/partners/at/">
<div class="ClientsCard__img">
<img alt="AT" title="AT" src="/media/CACHE/images/images_partners/_autotechgroup/8cbf94820a9b1a58b87698312a096f33.jpg">
</div>
</a> <a target="_blank" rel="nofollow" class="ourClientsCard__a" href="https://autotechgroup.ru/">https://autotechgroup.ru/</a>
<p class="ClientsCard__p">
AT </p>
</div>
<div class="ClientsCard">Starline
<a style="text-decoration:none;" target="_blank" href="/partners/starline/">
<div class="ClientsCard__img">
</div>
</a> <a target="_blank" rel="nofollow" class="ourClientsCard__a" href=""></a>
<p class="ClientsCard__p">
Starline </p>
</div>
</div>
</div>