Naudokite „JavaScript“, kad rūšiuotumėte elementus pagal keletą dinaminių svetainių kategorijas

Produktų filtravimo tobulinimas naudojant „JavaScript“ ir kelias kategorijas

Kuriant dinamiškus, patogius tinklalapius reikia sklandžiai naršyti ir lengvai filtruoti turinį. Tai ypač naudinga, kai rodomi produktai ar prekės, patenkančios į kelias kategorijas. Naudodami „JavaScript“ galime įdiegti intuityvų būdą filtruoti elementus pagal kelias kategorijas, todėl vartotojams būtų lengviau rasti būtent tai, ko jie ieško.

Šiuo atveju, spustelėjus kategorijos mygtuką, puslapyje rodomi elementai turėtų būti filtruojami. Vartotojas turėtų turėti galimybę vienu metu pasirinkti kelias kategorijas, kad būtų galima labiau pritaikyti gaminių vaizdą. Pavyzdžiui, pasirinkus „Lašiša“ ir „Krevetės“, turėtų būti rodomi tik elementai, kuriuose yra abu ingredientai.

Šiuo metu daugelis diegimų puikiai tinka vienos kategorijos filtravimui, tačiau pridėti kelias kategorijas gali būti sudėtinga. Iššūkis yra užtikrinti, kad sprendžiant, kuriuos elementus rodyti ar slėpti, būtų atsižvelgta į visas pasirinktas kategorijas. Šiame straipsnyje nagrinėjama, kaip efektyviai išplėsti vienos kategorijos filtravimą į kelių kategorijų filtravimą naudojant JavaScript.

Šiame vadove apžvelgsime sprendimą, kuris dinamiškai filtruoja korteles pagal kelis aktyvius mygtukus, kad būtų lengviau ir patogiai naudotis. Įdiegę šį „JavaScript“ sprendimą, sužinosite, kaip pagerinti savo tinklalapio interaktyvumą ir padidinti vartotojų įtraukimą.

„JavaScript“ kelių kategorijų filtravimo supratimas

Aukščiau pateiktuose scenarijuose pagrindinis dėmesys skiriamas dinaminiam elementų filtravimui pagal kelias kategorijas, o tai būtina norint pagerinti vartotojų patirtį gaminiais pagrįstose svetainėse. Tikslas yra leisti vartotojams pasirinkti kelias kategorijas ir atitinkamai filtruoti korteles. Tai pasiekiama naudojant „JavaScript“, fiksuojant mygtukų paspaudimus, pasirinktas kategorijas išsaugant masyve ir rodont tik tas korteles, kurios atitinka visas pasirinktas kategorijas. Procesas pradedamas vartotojui spustelėjus kategorijos mygtuką, kuris perjungia aktyvią to mygtuko būseną. Mygtuko reikšmė saugoma masyve, kuris atspindi visus aktyvius filtrus.

Svarbi šio sprendimo dalis yra masyvo metodo naudojimas kiekvienas (). Ši komanda užtikrina, kad visos pasirinktos kategorijos būtų palygintos su kortelės kategorijomis. Ji patikrina, ar kiekviena aktyvi kategorija yra kortelės kategorijose, todėl kelių kategorijų filtravimas veikia sklandžiai. Kitas svarbus metodas yra padalinti (), kuris naudojamas kategorijų eilutei iš kiekvienos kortelės suskaidyti į masyvą. Tai leidžia „JavaScript“ palyginti atskiras kategorijas ir nustatyti, kurios kortelės turi būti rodomos arba paslėptos.

Be to, scenarijus naudoja classList.toggle() Norėdami pridėti arba pašalinti aktyvią klasę ant mygtukų spustelėjus. Ši klasė yra labai svarbi vizualiniam grįžtamajam ryšiui, nes ji rodo, kurie mygtukai šiuo metu yra aktyvūs. Kai mygtukas išjungiamas, jo kategorija pašalinama iš aktyvių kategorijų masyvo ir vėl suaktyvinama filtravimo funkcija, kad būtų atnaujintas ekranas. Kortelės, kurios neatitinka aktyvių kategorijų, yra paslėptos pridedant klasę, kad jos būtų pažymėtos kaip neaktyvios. Šis metodas užtikrina, kad vartotojai galėtų lengvai patikslinti paiešką pasirinkdami arba panaikindami kelių filtrų pasirinkimą.

Galinis scenarijus sukurtas taip, kad būtų galima apdoroti produkto filtravimą serverio pusėje naudojant Node.js ir Express. Pasirinktos kategorijos siunčiamos į serverį per POST užklausą, o serveris apdoroja šią užklausą filtruodamas produktus ir grąžindamas tik tas prekes, kurios atitinka aktyvias kategorijas. Serveris naudoja tą pačią logiką kaip ir priekinė dalis, naudodama filtras () būdas palyginti pasirinktas kategorijas su kiekvieno produkto kategorijomis. Šis metodas yra naudingas dirbant su dideliais duomenų rinkiniais, nes jis perkelia apdorojimą iš kliento pusės, todėl galutiniai vartotojai gali geriau dirbti.

// Define product data
let products = {
  data: [
    { productName: "Fantasy", category: "Salmon, Shrimp" },
    { productName: "Spring", category: "Veggie" },
    { productName: "Rainbow", category: "Salmon, Tuna, Unagi" },
    { productName: "Unique", category: "Salmon, Tuna, Unagi, Shrimp" },
    { productName: "Perfection", category: "Salmon" },
  ]
};

// Handle button click event
let activeCategories = [];
document.querySelectorAll(".category-button").forEach(button => {
  button.addEventListener("click", () => {
    const category = button.innerText.trim();
    button.classList.toggle("active-button");
    if (button.classList.contains("active-button")) {
      activeCategories.push(category);
    } else {
      activeCategories = activeCategories.filter(cat => cat !== category);
    }
    filterCards();
  });
});

// Filter cards based on active categories
function filterCards() {
  document.querySelectorAll(".card").forEach(card => {
    const cardCategories = card.getAttribute("data-category").split(",");
    const match = activeCategories.every(cat => cardCategories.includes(cat));
    card.style.display = match ? "block" : "none";
  });
}

const express = require('express');
const app = express();
app.use(express.json());

// Sample product data
const products = [
  { name: 'Fantasy', categories: ['Salmon', 'Shrimp'] },
  { name: 'Spring', categories: ['Veggie'] },
];

// Filter products API
app.post('/filter', (req, res) => {
  const selectedCategories = req.body.categories;
  const filteredProducts = products.filter(product =>
    selectedCategories.every(cat => product.categories.includes(cat))
  );
  res.json(filteredProducts);
});

app.listen(3000, () => console.log('Server running on port 3000'));

Pažangūs kelių kategorijų filtravimo būdai interneto kūrimo srityje

Diegiant kelių kategorijų filtravimo sistemą JavaScript, svarbu atsižvelgti ne tik į vartotojo sąsajos sąveiką, bet ir į ją palaikančią duomenų struktūrą. Dinamiško turinio kontekste išlaikomas optimizuotas ir švarus DOM Svarbiausia yra manipuliavimo strategija. Pavyzdžiui, galite naudoti įvykių delegavimo metodus, kad galėtumėte efektyviai valdyti kelis kategorijų mygtukus ir užtikrinti, kad būtų manipuliuojami tik reikalingi DOM elementai.

Vienas aspektas, galintis dar labiau pagerinti filtravimo patirtį, yra sudėtingesnių vartotojo sąsajos elementų, pvz., žymimųjų laukelių arba kelių pasirinkimų išskleidžiamųjų meniu, pridėjimas vietoj paprastų mygtukų. Tai leidžia vartotojams detaliau sąveikauti su filtrais. Pavyzdžiui, išskleidžiamasis meniu, leidžiantis pasirinkti kelis kartus, suteikia aiškesnę vartotojo sąsają ir daugiau lankstumo renkantis kategorijas. Tai gali būti įgyvendinta naudojant papildomą „JavaScript“ logiką ir stilių, kartu naudojant masyvo metodus, pvz filter() ir every() kategorijų palyginimui.

Kitas svarbus aspektas yra filtravimo sistemos veikimas, ypač kai kalbama apie didelį duomenų rinkinį. Kai turite šimtus ar tūkstančius elementų, kuriuos norite filtruoti, labai svarbu kiek įmanoma sumažinti manipuliavimą DOM. Vienas iš būdų tai optimizuoti yra DOM naujinimų paketas naudojant requestAnimationFrame() arba debounce() metodus, kaip kontroliuoti naujinimų dažnį ir užtikrinti sklandžią vartotojo patirtį. Šie metodai ne tik pagerina našumą, bet ir padidina puslapio reagavimą, todėl jį galima keisti didesniems duomenų rinkiniams.