Filtertaste funktioniert nicht auf mehreren Seiten (Pagination) in der Galerie [geschlossen] ⇐ HTML

[Guest]

Ich habe ein Problem, bei dem die Filtertaste in meiner Galerie korrekt funktioniert, wenn sich die Bilder auf der aktuellen Seite befinden. Wenn ich jedoch auf eine Filtertaste klicke (z. B. "regierender Planet"), wird keine Bilder von Bildern angezeigt Andere Seiten, auf denen der Filter gelten sollte. Ganze Galerie (nicht nur die aktuelle Seite). Die Pagination sollte intakt bleiben und nur 20 gefilterte Bilder pro Seite anzeigen, und die Filter sollten auf Bilder auf allen Seiten gelten. Funktioniert für Bilder auf der aktuellen Seite und filtert keine Bilder von anderen Seiten. Wenn ich beispielsweise auf Seite 1 auf "Reguling Planet" klicke, werden Elemente aus Seite 6 angezeigt (wo sich diese Bilder befinden). < /P>
Was ich ausprobiert habe: < BR />
Ich habe versucht, die URL -Parameter mithilfe des ActiveFilters -Arrays zu verwalten. Die Filter werden auf der Seite korrekt aktualisiert, aber sie zeigen keine Bilder von anderen Seiten wie erwartet an. > [*] Bilder werden in Seiten unterteilt (z. B. 20 Bilder pro Seite).
[*] Filter werden durch Auswahl von Schaltflächen angewendet.

Das Problem tritt auf, wenn versucht wird, über mehrere Seiten zu filtern. Filter gelten in der gesamten Galerie, nicht nur auf der aktuellen Seite, während nur 20 Bilder pro Seite angezeigt werden. Wie kann ich dieses Verhalten erreichen? -Code-js Lang-Js PrettyPrint-Override ">

Code: Select all

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]