Кнопка фильтра не работает на нескольких страницах (страниц) в галерее [закрыто] ⇐ Html

[Anonymous]

Я сталкиваюсь с проблемой, в которой кнопка фильтра в моей галерее работает правильно, когда изображения находятся на текущей странице, но когда я нажимаю кнопку фильтра (например, «Правящая планета»), он не отображает изображения из Другие страницы, где должен применяться фильтр. только текущая страница). Петинизация должна оставаться нетронутой, отображая только 20 фильтрованных изображений на страницу, и фильтры должны применяться к изображениям на всех страницах. < /P>
Текущее поведение:
Фильтр работает только для изображений, которые находятся на текущей странице, и он не фильтрует изображения с других страниц. Например, когда я нажимаю на «Правящая планета» на странице 1, она не показывает элементы со страницы 6 (где эти изображения находятся). < /P>
То, что я пробовал: < Br /> Я попытался управлять параметрами URL с использованием массива ActiveFilters.
Фильтры правильно обновляются на странице, но они не показывают изображения с других страниц, как и ожидалось. < /p>
Ключевые точки:
изображения делятся на страницы (например, 20 изображений на страницу).
Фильтры применяются путем выбора кнопок.
Проблема возникает при попытке фильтровать на нескольких страницах. . < /p>
Что мне нужна с помощью:
Мне нужно изменить JavaScript, чтобы фильтры применялись по всей галерее, независимо от текущей страницы, при этом при этом только показывают только 20 изображений за страницу. Как я могу достичь такого поведения? -code-js lang-js prettyprint-override ">

Код: Выделить всё

document.addEventListener("DOMContentLoaded", () => {
const filterButtons = document.querySelectorAll(".filter-btn");
const galleryItems = document.querySelectorAll(".gallery-item");
let activeFilters = [];

function applyFilters() {
galleryItems.forEach(item => {
const itemCategories = item.querySelector(".gallery-img").dataset.category.split(" ");
const match = activeFilters.some(filter => itemCategories.includes(filter));
item.style.display = match ? "block" : "none";
});
}

filterButtons.forEach(button => {
button.addEventListener("click", () => {
const filter = button.dataset.filter;
button.classList.toggle("active");

if (activeFilters.includes(filter)) {
activeFilters = activeFilters.filter(f => f !== filter);
} else {
activeFilters.push(filter);
}
applyFilters();
});
});

applyFilters();
});< /code>

Element
Ruling Planet
Sayings
Symbol


[img]image1.png[/img]

[img]image2.png[/img]




[url=page-1.html]1[/url]
[url=page-2.html]2[/url]

Подробнее здесь: https://stackoverflow.com/questions/794 ... in-gallery