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

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

Сообщение Anonymous »

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


Element X


Ruling Planet X


Sayings X


Symbol X







     & l t ; t i t l e & g t ; G a l l e r y & l t ; / t i t l e & g t ; < b r   / >     & l t ; l i n k   h r e f = " h t t p s : / / c d n j s . c l o u d f l a r e . c o m / a j a x / l i b s / f o n t - a w e s o m e / 6 . 0 . 0 / c s s / a l l . m i n . c s s "   r e l = " s t y l e s h e e t " & g t ; < b r   / >     & l t ; s t y l e & g t ; < b r   / >     & l t ; / s t y l e & g t ; < b r   / > & l t ; / h e a d & g t ; < b r   / > < b r   / > & l t ; b o d y & g t ; < b r   / >     & l t ; d i v   c l a s s = " g a l l e r y " & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - E l e m e n t - S y m b o l - A i r - 2 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " e l e m e n t   s y m b o l "   a l t = " I m a g e   1 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - E l e m e n t - S y m b o l - A i r - 2 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - E l e m e n t - S y m b o l - A i r . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " e l e m e n t   s y m b o l "   a l t = " I m a g e   2 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - E l e m e n t - S y m b o l - A i r . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 2 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   3 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 2 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 3 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   4 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 3 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 4 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   5 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 4 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 5 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   6 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 5 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 6 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   7 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 6 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 7 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   8 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 7 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 8 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   9 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 8 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 9 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   1 0 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 9 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 1 0 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   1 1 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 1 0 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r   / >         & l t ; / d i v & g t ; < b r   / >         & l t ; d i v   c l a s s = " g a l l e r y - i t e m " & g t ; < b r   / >             & l t ; i m g   s r c = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 1 1 . p n g "   c l a s s = " g a l l e r y - i m g "   d a t a - c a t e g o r y = " r u l i n g - p l a n e t "   a l t = " I m a g e   1 2 " & g t ; < b r   / >             & l t ; a   h r e f = " h t t p s : / / e m b r o i d l a . c o m / w p - c o n t e n t / u p l o a d s / 2 0 2 5 / 0 2 / A q u a r i u s - R u l i n g - P l a n e t - U r a n u s - 1 1 . p n g "   d o w n l o a d   c l a s s = " d o w n l o a d - i c o n " & g t ; < b r   / >                                 & l t ; i   c l a s s = " f a - s o l i d   f a - c i r c l e - d o w n " & g t ; & l t ; / i & g t ; < b r   / >                         & l t ; / a & g t ; < b r />    

[i]
[url=https://embroidla.com/wp-content/uploads/2025/02/Aquarius-Ruling-Planet-Uranus-12.png]
[/i]
[/url]

[i]
[url=https://embroidla.com/wp-content/uploads/2025/02/Aquarius-Ruling-Planet-Uranus-13.png]
[/i]
[/url]

[i]
[url=https://embroidla.com/wp-content/uploads/2025/02/Aquarius-Ruling-Planet-Uranus-14.png]
[/i]
[/url]

[i]
[url=https://embroidla.com/wp-content/uploads/2025/02/Aquarius-Ruling-Planet-Uranus-15.png]
[/i]
[/url]

[i]
[url=https://embroidla.com/wp-content/uploads/2025/02/Aquarius-Ruling-Planet-Uranus.png]
[/i]
[/url]

[i]
[url=https://embroidla.com/wp-content/uploads/2025/02/Aquarius-Saying-2.png]
[/i]
[/url]

[i]
[url=https://embroidla.com/wp-content/uploads/2025/02/Aquarius-Saying-9.png]
[/i]
[/url]

[i]
[url=https://embroidla.com/wp-content/uploads/2025/02/Aquarius-Saying-10.png]
[/i]
[/url]







[url=https://embroidla.com/astrology/aquarius-zodiac-sign]1[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-2]2[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-3]3[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-4]4[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-5]5[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-6]6[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-7]7[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-8]8[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-9]9[/url]
[url=https://embroidla.com/astrology/aquarius-zodiac-sign-10]10[/url]




Подробнее здесь: https://stackoverflow.com/questions/794 ... how-on-the
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Html»