Все привет!
Прошу помощи, так как уже окончательно запутался.
не могу понять как правильно адаптировать скрипт для подгрузки постов по нажатию на "смотреть еще"... он конфликтует с фильтром карточек. Добавляется класс в одном случае (hide, прописывал в css ), а в случае с подгрузкой постов, добавляется прям инлайново display: none. и поэтому фильтр не работает корректно для всех постов
есть такой каталог с карточками (тут работает подгрузка постов, но ломается фильтр)
https://runar.pw/tests/catalog/
должна работать и фильтрация и показать еще контент при нажатии на "смотреть еще".
Когда втыкаю скрипт для "смотреть еще" он у меня начинает конфликтовать с фильтром.
Вот тут работает только фильтр
https://runar.pw/tests2/catalog/
js:
// Начало скрипта для фильтра карточек
// Проверка на наличие класса hide
var checkClass = function () {
if ($('.section-5__card').hasClass('hide')) {
$('.section-5__card').removeClass('hide');
}
};
// Фильтр категорий
$(document).ready(function () {
$('.filter-nav__reset').click(function () {
checkClass();
});
$('.slick-slide.filt-her').click(function () {
checkClass();
$('.section-5__card:not(.filt-her)').toggleClass('hide');
});
$('.filt-sedan').click(function () {
checkClass();
$('.section-5__card:not(.filt-sedan)').toggleClass('hide');
});
$('.filt-small-crossover').click(function () {
checkClass();
$('.section-5__card:not(.filt-small-crossover)').toggleClass('hide');
});
$('.filt-hetchback').click(function () {
checkClass();
$('.section-5__card:not(.filt-hetchback)').toggleClass('hide');
});
$('.filt-coupe').click(function () {
checkClass();
$('.section-5__card:not(.filt-coupe)').toggleClass('hide');
});
$('.filt-hybrid').click(function () {
checkClass();
$('.section-5__card:not(.filt-hybrid)').toggleClass('hide');
});
$('.filt-full-crossover').click(function () {
checkClass();
$('.section-5__card:not(.filt-full-crossover)').toggleClass('hide');
});
$('.filt-recommend').click(function () {
checkClass();
$('.section-5__card:not(.filt-recommend)').toggleClass('hide');
});
// Активное состояние кнопки
$('.filter-nav__button').click(function () {
$('.filter-nav__button').removeClass('filtBtn-active');
$(this).addClass('filtBtn-active');
})
$('.filter-nav__reset').click(function () {
$('.filter-nav__button').removeClass('filtBtn-active');
$(this).addClass('filtBtn-active');
})
// Конец скрипта для фильтра карточек
});
// Показать еще контент
$(document).ready(function () {
let list = $(".cards-wrap .section-5__card");
let numToShow = 6;
let button = $("#loadMore2");
let numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function () {
let showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
let nowShowing = list.filter(':visible').length;
if (nowShowing >= numInList) {
button.hide();
}
});
});
