使用 JavaScript 按多个类别对动态网站的项目进行排序

使用 JavaScript 进行动态项目过滤：优化的多类别过滤

使用 Vanilla JavaScript 的前端开发方法

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

动态项目过滤的后端实现

使用 Node.js 和 Express 的服务器端方法

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

有关 JavaScript 中多类别过滤的常见问题

1. 如何处理多个有源滤波器？
2. 您可以将活动过滤器存储在数组中并使用 every() 检查每张卡的类别是否与所选过滤器匹配。
3. 如果我有重叠的类别会怎样？
4. 使用 split() 和 trim()，您可以分离和清理类别数据，确保每个类别与活动过滤器正确比较。
5. 如何优化大型数据集的过滤？
6. 使用批量 DOM 更新 requestAnimationFrame() 或实施一个 debounce() 功能减少过滤操作的频率，提高性能。
7. 如何显示与所有选定类别匹配的项目？
8. 使用 every() 确保所有选定的类别都包含在每张卡片的数据中，然后再使其可见。
9. 处理卡系统中损坏图像的最佳方法是什么？
10. 实施一个 error 每个图像上的事件侦听器可在图像加载失败时隐藏或替换该图像，从而增强用户体验。

关于 JavaScript 过滤技术的最终想法

在网页中实现多类别过滤可以显着改善用户体验，使用户更容易找到自己需要的内容。小心使用 JavaScript 方法如 切换（） 和 每一个（），开发人员可以创建高效、可扩展的解决方案来顺利处理大型数据集。

此外，通过优化 DOM 操作并减少不必要的操作，这种方法即使在高用户交互的情况下也能确保性能。该过滤系统可以集成到电子商务网站、投资组合或任何需要基于多个过滤器的动态内容显示的页面中。