JavaScript を使用して動的 Web サイトの項目をいくつかのカテゴリごとに並べ替える

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 フィルタリング技術に関する最終的な考え

Web ページにマルチカテゴリ フィルタリングを実装すると、ユーザー エクスペリエンスが大幅に向上し、ユーザーが必要なものを正確に見つけやすくなります。慎重に使用することで、 JavaScript などの方法 トグル（） そして 毎（）、開発者は、大規模なデータセットをスムーズに処理する、効率的でスケーラブルなソリューションを作成できます。

さらに、このアプローチは DOM 操作を最適化し、不必要な操作を削減することにより、ユーザーとの対話が多い場合でもパフォーマンスを保証します。このフィルタリング システムは、電子商取引 Web サイト、ポートフォリオ、または複数のフィルタに基づいた動的なコンテンツ表示を必要とする任意のページに統合できます。