Mirami97
@Mirami97
студент

Как измерит высоту каждого элемента и внести изменение на каждое по отдельному в JS?

Работаю над страницей
В левой стороне есть фильтр по характеристикам(атрибутам). У каждого есть под пункты
604a0239caff4065978468.jpeg
Мне надо измерит высоту каждого под пункты и поставить проверку
Пробовал такие варианты:
const contentFilter = document.querySelectorAll('.sidebar-accardion__item .content-filter'),
      contentFilterHeight = document.querySelector('.sidebar-accardion__item .content-filter').clientHeight;                                                    

if(contentFilterHeight > 220) {
    contentFilter.forEach(item => {
        item.style.maxHeight = "220px";
        item.style.overflowY = "scroll"
    })
} else {
    contentFilter.forEach(item => {
        item.style.maxHeight = "fill-content";
        item.style.overflowY = "auto"
    })
}

const contentFilter = document.querySelectorAll('.sidebar-accardion__item .content-filter'),
      contentFilterHeight = document.querySelector('.sidebar-accardion__item .content-filter').clientHeight;  
contentFilter.forEach(item => {
    if(contentFilterHeight > 240) {
        item.style.maxHeight = "240px";
        item.style.overflowY = "scroll"
    } else {
        item.style.maxHeight = "fill-content";
        item.style.overflowY = "auto"
    }
})

У меня скроль появляется на всех подкатегориях.
604a02dff3cc5710887151.jpeg
Но на подкатегориях высотой меньше 240 не должно появляется скроль. Как это сделать?
В чем моя ошибка?. Покажите пжл правильный пут написание скрипта).
  • Вопрос задан
  • 120 просмотров
Решения вопроса 1
@VaranCollins
Magento Frontend Developer
Сильно не вникал, тут в логике у тебя ошибка. Ты смотришь высоту первого элемента и на него равняешься, а надо перебирать все элементы и у каждого сравнивать высоту.
Думаю код должен выглядеть примерно так

const contentFilter = document.querySelectorAll('.sidebar-accardion__item .content-filter');                                                  

contentFilter.forEach(item => {
    if (item.clientHeight > 220) {
        item.style.maxHeight = "220px";
        item.style.overflowY = "scroll";
    } else {
        item.style.maxHeight = "fill-content";
        item.style.overflowY = "auto";
    }
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Если посмотреть на второй блок кода повнимательней, то получается ты вычисляешь высоту одного блока, вместо того, чтобы вычислять высоту конкретного блока item внутри перебора forEach
Ответ написан
Marina666
@Marina666
Создаю сайты
Там достаточно на css прописать
.filter{
     max-height: 275px;
     overflow-y: auto;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы