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

[Anonymous]

Я сталкиваюсь с проблемой, в которой кнопка фильтра в моей галерее работает правильно, когда изображения находятся на текущей странице, но когда я нажимаю кнопку фильтра (например, «Правящая планета»), он не отображает изображения из другие страницы, где должен применяться фильтр. Вся галерея (не только текущая страница). Парень должен оставаться нетронутой, отображая только 20 фильтрованных изображений на страницу, и фильтры должны применяться к изображениям на всех страницах. < /P>
Текущее поведение:

только фильтр Работает на изображения, которые находятся на текущей странице, и не фильтровали изображения с других страниц. Например, когда я нажимаю на «Правящая планета» на странице 1, она не показывает элементы со страницы 6 (где эти изображения находятся). < /P>
То, что я пробовал: < Br />
Я попытался управлять параметрами URL с помощью массива ActiveFilters. Фильтры правильно обновляются на странице, но они не показывают изображения с других страниц, как и ожидалось. > [*] Изображения разделены на страницы (например, 20 изображений на страницу).
[*] Фильтры применяются путем выбора кнопок.

Проблема возникает при попытке фильтровать на нескольких страницах. Фильтры применяются по всей галерее, а не только на текущей странице, в то время как показывают только 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=https://embroidla.com/astrology/aquarius-zodiac-sign]1[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-2]2[/url]

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