Käytä JavaScriptiä lajitellaksesi kohteet useiden luokkien mukaan dynaamisille verkkosivustoille

Tuotesuodatuksen tehostaminen JavaScriptillä ja useilla luokilla

Dynaamisten, käyttäjäystävällisten verkkosivujen luominen edellyttää saumattoman navigoinnin ja sisällön helpon suodattamisen tarjoamista. Tämä on erityisen hyödyllistä, kun näytetään tuotteita tai tuotteita, jotka kuuluvat useisiin luokkiin. JavaScriptin avulla voimme ottaa käyttöön intuitiivisen tavan suodattaa kohteita useiden luokkien perusteella, mikä helpottaa käyttäjien löytämistä tarkalleen etsimänsä.

Tässä skenaariossa luokkapainikkeen napsauttaminen pitäisi suodattaa sivulla näkyvät kohteet. Käyttäjän tulisi voida valita useita luokkia samanaikaisesti, mikä mahdollistaa räätälöidyn näkymän tuotteista. Esimerkiksi valitsemalla "Lohi" ja "Katkarapu" pitäisi näyttää vain tuotteet, jotka sisältävät molemmat ainesosat.

Tällä hetkellä monet toteutukset toimivat hyvin yhden luokan suodatuksessa, mutta useiden luokkien lisääminen voi olla hankalaa. Haasteena on varmistaa, että kaikki valitut luokat otetaan huomioon päätettäessä, mitkä kohteet näytetään tai piilotetaan. Tässä artikkelissa tarkastellaan, kuinka yhden luokan suodatus voidaan laajentaa usean luokan suodatukseen tehokkaalla tavalla JavaScriptin avulla.

Tässä oppaassa käymme läpi ratkaisun, joka suodattaa kortit dynaamisesti useiden aktiivisten painikkeiden perusteella ja tarjoaa helpon ja käyttäjäystävällisen kokemuksen. Ottamalla tämän JavaScript-ratkaisun käyttöön opit parantamaan verkkosivusi interaktiivisuutta ja lisäämään käyttäjien sitoutumista.

JavaScriptin moniluokkasuodatuksen ymmärtäminen

Yllä toimitetut skriptit keskittyvät kohteiden dynaamiseen suodattamiseen useiden luokkien perusteella, mikä on välttämätöntä tuotepohjaisten verkkosivustojen käyttökokemuksen parantamiseksi. Tavoitteena on antaa käyttäjille mahdollisuus valita useita luokkia ja suodattaa kortteja niiden mukaisesti. Tämä saavutetaan JavaScriptillä vangitsemalla painikkeen napsautukset, tallentamalla valitut luokat taulukkoon ja näyttämällä sitten vain kortit, jotka vastaavat kaikkia valittuja luokkia. Prosessi käynnistyy, kun käyttäjä napsauttaa luokkapainiketta, joka vaihtaa kyseisen painikkeen aktiivisen tilan. Painikkeen arvo tallennetaan taulukkoon, joka edustaa kaikkia aktiivisia suodattimia.

Tämän ratkaisun kriittinen osa on array-menetelmän käyttö joka(). Tämä komento varmistaa, että kaikkia valittuja luokkia verrataan kortin luokkiin. Se tarkistaa, löytyykö jokainen aktiivinen luokka kortin luokista, mikä mahdollistaa useiden kategorioiden suodatuksen toiminnan. Toinen tärkeä menetelmä on jakaa(), jota käytetään jakamaan kunkin kortin kategorioiden merkkijono taulukkoon. Tämä mahdollistaa JavaScriptin vertailla yksittäisiä luokkia ja määrittää, mitkä kortit näytetään tai piilotetaan.

Lisäksi skripti käyttää classList.toggle() lisätäksesi tai poistaaksesi aktiivisen luokan painikkeista, kun niitä napsautetaan. Tämä luokka on ratkaisevan tärkeä visuaalisen palautteen kannalta, koska se osoittaa, mitkä painikkeet ovat tällä hetkellä aktiivisia. Kun painike poistetaan käytöstä, sen luokka poistetaan aktiivisten luokkien ryhmästä ja suodatustoiminto käynnistyy uudelleen näytön päivittämiseksi. Kortit, jotka eivät vastaa aktiivisia luokkia, piilotetaan lisäämällä luokka, jolla ne merkitään ei-aktiivisiksi. Tämä menetelmä varmistaa, että käyttäjät voivat helposti tarkentaa hakuaan valitsemalla useita suodattimia tai poistamalla niiden valinnan.

Taustaskripti on rakennettu käsittelemään tuotteiden suodatusta palvelinpuolella Node.js:n ja Expressin avulla. Valitut luokat lähetetään palvelimelle POST-pyynnön kautta, ja palvelin käsittelee tämän pyynnön suodattamalla tuotteet ja palauttamalla vain ne tuotteet, jotka vastaavat aktiivisia luokkia. Palvelin käyttää samaa logiikkaa kuin käyttöliittymä hyödyntäen suodattaa() tapa verrata valittuja luokkia kunkin tuotteen luokkiin. Tämä lähestymistapa on hyödyllinen käsiteltäessä suuria tietojoukkoja, koska se kuormittaa käsittelyä asiakaspuolelta, mikä parantaa loppukäyttäjien suorituskykyä.

// 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'));

Kehittyneet tekniikat usean luokan suodatukseen verkkokehityksessä

Kun otetaan käyttöön moniluokkainen suodatusjärjestelmä JavaScript, on tärkeää ottaa huomioon paitsi käyttöliittymän vuorovaikutus myös sitä tukeva tietorakenne. Dynaamisen sisällön yhteydessä ylläpitää optimoitua ja puhdasta DOM manipulointistrategia on avainasemassa. Voit esimerkiksi käyttää tapahtumien delegointitekniikoita useiden luokkapainikkeiden tehokkaaseen käsittelyyn varmistaen, että vain vaadittuja DOM-elementtejä käsitellään.

Yksi näkökohta, joka voi parantaa suodatuskokemusta entisestään, on lisätä kehittyneempiä käyttöliittymäelementtejä, kuten valintaruutuja tai avattavia monivalintavalikkoja yksinkertaisten painikkeiden sijaan. Tämän ansiosta käyttäjät voivat olla vuorovaikutuksessa suodattimien kanssa yksityiskohtaisemmin. Esimerkiksi avattava valikko, joka mahdollistaa useita valintoja, tarjoaa selkeämmän käyttöliittymän ja enemmän joustavuutta käyttäjille luokkien valinnassa. Tämä voidaan toteuttaa ylimääräisellä JavaScript-logiikalla ja -tyylillä, samalla kun käytetään taulukkomenetelmiä, kuten filter() ja every() luokkavertailua varten.

Toinen kriittinen näkökohta on suodatusjärjestelmän suorituskyky, erityisesti kun on kyse suuresta tietojoukosta. Kun sinulla on satoja tai tuhansia suodatettavia kohteita, on erittäin tärkeää minimoida DOM-manipulaatio mahdollisimman paljon. Yksi tapa optimoida tämä on koota päivitykset DOM:iin käyttämällä requestAnimationFrame() tai debounce() menetelmiä päivitysnopeuden hallitsemiseksi ja sujuvan käyttökokemuksen varmistamiseksi. Nämä tekniikat eivät ainoastaan ​​paranna suorituskykyä, vaan myös parantavat sivun reagointikykyä, mikä tekee siitä skaalautuvampaa suurempia tietojoukkoja varten.