jsは複数条件のフィルターリストを実装します

次の手順に従って、複数条件フィルターリストを実装できます。

すべてのリスト項目を含む配列を作成します。
空の配列を作成して、フィルター条件に一致するリスト項目を保存します。
すべてのフィルター条件を含むオブジェクトを作成します。各フィルター条件は入力ボックスまたはドロップダウンメニューに対応します。
各入力ボックスまたはドロップダウンメニューの変更イベントをリッスンし、変更されたときにフィルターオブジェクトの値を更新します。
リスト項目の配列を反復処理し、リスト項目ごとにすべてのフィルター条件が満たされているかどうかを確認します。
リスト項目がすべてのフィルター基準に一致する場合、その項目は結果が保存される配列に追加されます。
結果の配列内のリスト項目をレンダリングします。

簡単な実装例を次に示します。

// 列表项数组
const items = [
  { name: 'Apple', category: 'Fruit', price: 2.5 },
  { name: 'Banana', category: 'Fruit', price: 1.5 },
  { name: 'Carrot', category: 'Vegetable', price: 0.8 },
  { name: 'Tomato', category: 'Vegetable', price: 1.2 },
  { name: 'Orange', category: 'Fruit', price: 3.0 },
];

// 筛选条件对象
const filters = {
  name: '',
  category: '',
  price: '',
};

// 更新筛选条件对象的值
function updateFilter(key, value) {
  filters[key] = value;
  renderList();
}

// 检查是否符合筛选条件
function checkFilters(item) {
  for (let key in filters) {
    if (filters[key] !== '' && item[key] !== filters[key]) {
      return false;
    }
  }
  return true;
}

// 渲染列表
function renderList() {
  const filteredItems = items.filter(checkFilters);

  // 渲染筛选结果
  // ...
}

// 监听筛选条件输入框和下拉菜单的变化事件
document.getElementById('nameInput').addEventListener('change', (event) => {
  updateFilter('name', event.target.value);
});

document.getElementById('categorySelect').addEventListener('change', (event) => {
  updateFilter('category', event.target.value);
});

document.getElementById('priceInput').addEventListener('change', (event) => {
  updateFilter('price', event.target.value);
});

// 初始化列表
renderList();

上記の例では、製品情報を含むリスト項目の配列を作成し、名前、カテゴリ、価格という 3 つのフィルター条件を設定しました。入力ボックスとドロップダウンメニューの変更イベントをリッスンしてフィルター条件オブジェクトの値を更新し、変更のたびにリストを再レンダリングして、すべてのフィルター条件を満たすリスト項目のみを表示します。

jsは複数条件のフィルターリストを実装します

おすすめ