استخدم JavaScript لفرز العناصر حسب عدة فئات لمواقع الويب الديناميكية

تحسين تصفية المنتجات باستخدام JavaScript والفئات المتعددة

يتضمن إنشاء صفحات ويب ديناميكية وسهلة الاستخدام توفير تنقل سلس وتصفية سهلة للمحتوى. يعد هذا مفيدًا بشكل خاص عند عرض المنتجات أو العناصر التي تندرج ضمن فئات متعددة. باستخدام JavaScript، يمكننا تنفيذ طريقة بديهية لتصفية العناصر استنادًا إلى فئات متعددة، مما يسهل على المستخدمين العثور على ما يبحثون عنه بالضبط.

في هذا السيناريو، يؤدي النقر فوق زر الفئة إلى تصفية العناصر المعروضة على الصفحة. يجب أن يكون المستخدم قادرًا على تحديد فئات متعددة في وقت واحد، مما يسمح برؤية أكثر تخصيصًا للمنتجات. على سبيل المثال، يجب أن يؤدي تحديد "سمك السلمون" و"الروبيان" إلى إظهار العناصر التي تحتوي على كلا المكونين فقط.

في الوقت الحالي، تعمل العديد من التطبيقات بشكل جيد لتصفية فئة واحدة، ولكن إضافة فئات متعددة قد يكون أمرًا صعبًا. ويكمن التحدي في التأكد من أخذ جميع الفئات المحددة في الاعتبار عند تحديد العناصر التي سيتم إظهارها أو إخفاءها. تستكشف هذه المقالة كيفية توسيع تصفية الفئة الواحدة إلى تصفية الفئات المتعددة بطريقة فعالة باستخدام JavaScript.

في هذا الدليل، سنتعرف على حل يقوم بتصفية البطاقات ديناميكيًا استنادًا إلى أزرار نشطة متعددة، مما يوفر تجربة سهلة وسهلة الاستخدام. من خلال تطبيق حل JavaScript هذا، ستتعلم كيفية تحسين تفاعل صفحة الويب الخاصة بك وتعزيز مشاركة المستخدم.

فهم التصفية متعددة الفئات في JavaScript

تركز البرامج النصية المقدمة أعلاه على تصفية العناصر ديناميكيًا استنادًا إلى فئات متعددة، وهو أمر ضروري لتحسين تجربة المستخدم على مواقع الويب القائمة على المنتجات. الهدف هو السماح للمستخدمين بتحديد فئات متعددة وتصفية البطاقات وفقًا لذلك. يتم تحقيق ذلك باستخدام JavaScript عن طريق التقاط نقرات الزر، وتخزين الفئات المحددة في مصفوفة، ثم عرض البطاقات التي تطابق جميع الفئات المحددة فقط. تبدأ العملية عندما ينقر المستخدم على زر الفئة، مما يؤدي إلى تبديل الحالة النشطة لذلك الزر. يتم تخزين قيمة الزر في مصفوفة تمثل جميع عوامل التصفية النشطة.

جزء مهم من هذا الحل هو استخدام طريقة الصفيف كل(). يضمن هذا الأمر مقارنة كافة الفئات المحددة بفئات البطاقة. فهو يتحقق مما إذا كانت كل فئة نشطة موجودة ضمن فئات البطاقة، وبالتالي يسمح للتصفية متعددة الفئات بالعمل بسلاسة. طريقة أخرى مهمة هي ينقسم()، والذي يُستخدم لتقسيم سلسلة الفئات من كل بطاقة إلى مصفوفة. يؤدي ذلك إلى تمكين JavaScript من مقارنة الفئات الفردية وتحديد البطاقات التي يجب عرضها أو إخفاؤها.

وبالإضافة إلى ذلك، يستخدم البرنامج النصي classList.toggle() لإضافة أو إزالة الفئة النشطة على الأزرار عند النقر عليها. تعتبر هذه الفئة ضرورية للتعليقات المرئية، لأنها تشير إلى الأزرار النشطة حاليًا. عند إلغاء تنشيط الزر، تتم إزالة فئته من مجموعة الفئات النشطة، ويتم تشغيل وظيفة التصفية مرة أخرى لتحديث العرض. يتم إخفاء البطاقات التي لا تتطابق مع الفئات النشطة عن طريق إضافة فئة لوضع علامة عليها على أنها غير نشطة. تضمن هذه الطريقة أنه يمكن للمستخدمين تحسين بحثهم بسهولة عن طريق تحديد أو إلغاء تحديد مرشحات متعددة.

تم تصميم البرنامج النصي الخلفي للتعامل مع تصفية المنتج على جانب الخادم باستخدام Node.js وExpress. يتم إرسال الفئات المحددة إلى الخادم من خلال طلب POST، ويقوم الخادم بمعالجة هذا الطلب عن طريق تصفية المنتجات وإرجاع العناصر التي تطابق الفئات النشطة فقط. يستخدم الخادم نفس منطق الواجهة الأمامية، وذلك باستخدام فلتر() طريقة لمقارنة الفئات المختارة مع فئات كل منتج. يعد هذا الأسلوب مفيدًا عند التعامل مع مجموعات البيانات الكبيرة، حيث أنه يحرر المعالجة من جانب العميل، مما يؤدي إلى أداء أفضل للمستخدمين النهائيين.

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

التقنيات المتقدمة للتصفية متعددة الفئات في تطوير الويب

عند تنفيذ نظام تصفية متعدد الفئات في جافا سكريبت، من المهم ألا تأخذ في الاعتبار تفاعل واجهة المستخدم فحسب، بل أيضًا بنية البيانات التي تدعمه. في سياق المحتوى الديناميكي، الحفاظ على الأمثل والنظيف DOM استراتيجية التلاعب هي المفتاح. على سبيل المثال، يمكنك استخدام تقنيات تفويض الأحداث للتعامل مع أزرار الفئات المتعددة بكفاءة، مما يضمن معالجة عناصر DOM المطلوبة فقط.

أحد الجوانب التي يمكن أن تعزز تجربة التصفية بشكل أكبر هو إضافة عناصر واجهة مستخدم أكثر تعقيدًا، مثل مربعات الاختيار أو القوائم المنسدلة متعددة التحديد، بدلاً من الأزرار البسيطة. يتيح ذلك للمستخدمين التفاعل مع المرشحات بطريقة أكثر تفصيلاً. على سبيل المثال، توفر القائمة المنسدلة التي تسمح بتحديدات متعددة واجهة مستخدم أكثر وضوحًا ومرونة أكبر للمستخدمين عند اختيار الفئات. يمكن تنفيذ ذلك باستخدام منطق وتصميم JavaScript إضافيين، مع الاستمرار في استخدام أساليب المصفوفة مثل filter() و every() لمقارنة الفئة.

هناك اعتبار حاسم آخر وهو أداء نظام التصفية، خاصة عند التعامل مع مجموعة كبيرة من البيانات. عندما يكون لديك مئات أو آلاف العناصر التي تريد تصفيتها، فمن الضروري تقليل معالجة DOM قدر الإمكان. إحدى الطرق لتحسين ذلك هي تجميع التحديثات على DOM باستخدام requestAnimationFrame() أو debounce() طرق للتحكم في معدل التحديثات وضمان تجربة مستخدم سلسة. لا تعمل هذه التقنيات على تحسين الأداء فحسب، بل تعمل أيضًا على تحسين استجابة الصفحة، مما يجعلها أكثر قابلية للتوسع لمجموعات البيانات الأكبر حجمًا.