Как отфильтровать изображения с других страниц в моей галерее изображений, чтобы они показали на текущей странице, на ко ⇐ Html

[Anonymous]

Примечание: я ничего не знаю о JavaScript и полагался на CHATGPT. Пожалуйста, предоставьте обновленный JavaScript с новыми изменениями, поскольку я полагался на CHATGPT и не знаю, где добавить новые изменения, спасибо! на WordPress. < /p>
Например, если я на странице 1 и нажимаю кнопку фильтра «Правящая планета» (изображения с категорией данных правящей планеты находятся на странице 6), это не Показание изображений с других страниц с этим фильтром на странице 1. Это также применяется к любой другой кнопке фильтра, я нажимаю там, где изображения находятся на других страницах. Тем не менее, это работает, когда я на странице. Например, когда я на странице 6 и нажимаю кнопку фильтра «Планета правящей планеты», она показывает на странице 6, потому что изображения с этой категорией данных уже на странице 6. Я хочу, чтобы функция JavaScript фильтровала изображения со всей Галерея (на всех страницах), но все еще показывает 20 изображений на страницу с выбранными фильтрами (не бесконечным свитком) и все еще убедитесь, что все мои страницы в странице показывают внизу страницы. < /p>
< P> Примечание: я хочу придерживаться только использования пользовательских HTML -блоков, так как я все еще новичок в WordPress. Я не хочу изменять файлы темы или что -то в этом роде. < /P>
Я очень признателен за помощь! Заранее спасибо
(я попытался сделать это с Chatgpt, и он сделал бесконечный прокрутку и просто полностью удалил мои номера страниц внизу, поэтому я сдался.) < Br /> Current JavaScript: < /strong> < /p>

document.addEventListener("DOMContentLoaded", () => {
const filterButtons = document.querySelectorAll(".filter-btn");
const galleryItems = document.querySelectorAll(".gallery-item");
const urlParams = new URLSearchParams(window.location.search);
let activeFilters = urlParams.getAll("filter");

function applyFilters() {
if (activeFilters.length === 0) {
galleryItems.forEach(item => item.style.display = "block");
return;
}

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";
});
}

if (activeFilters.length > 0) {
activeFilters.forEach(filter => {
const btn = document.querySelector(`.filter-btn[data-filter="${filter}"]`);
if (btn) btn.classList.add("active");
});
}

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);
}
updateURL();
});
});

function updateURL() {
const url = new URL(window.location);
url.searchParams.delete("filter");
activeFilters.forEach(filter => url.searchParams.append("filter", filter));
history.pushState(null, "", url);
applyFilters();
}

const paginationLinks = document.querySelectorAll(".pagination a");
paginationLinks.forEach(link => {
link.addEventListener("click", e => {
e.preventDefault();
const pageUrl = new URL(link.href);
activeFilters.forEach(filter => pageUrl.searchParams.append("filter", filter));
window.location.href = pageUrl.toString();
});
});

applyFilters();
});



Подробнее здесь: https://stackoverflow.com/questions/794 ... how-on-the