aircolor memolog

Web制作・テクノロジー、たまに旅行記

【jQuery】シンプルなフィルター機能付きギャラリー実装

長らく更新を止めていましたが、久々に投稿。 仕事この数ヶ月で色々な技術に触れましたが、やっぱり基礎は大事だねという問題にぶつかりまくってました。 なんで、ここしばらくは新しい技術を追いかけ過ぎず、基礎を積み重ねています。

フィルター(絞込)機能付きギャラリーの実装

基礎学習の一環としてこういったサンプルを実装・投稿していきたいと思います。今回はタイトル通り、よくあるフィルター(絞込)機能付きギャラリーの実装サンプルを紹介します。

See the Pen Simple Filter Gallery by Shinichi Kogiso (@kgsi) on CodePen.

処理の流れ

  1. class:filtermenuのli要素をクリック
  2. liに設定されたdata-fliterの値を取得
  3. class:postと併記したclassと一致するかチェック
  4. 一致したclass:postのみを表示

メニューのdata値をclickで取得し、そのdata値とclass:postと併記されているclassとを比較して、一致したpostのみを表示するというシンプルなロジックとなります。

表示とフィルター処理ロジックを分離

メンテナンスや、機能拡張していく際にひとまとめの処理を編集していくのは効率や見通しが悪いので、それぞれのロジックを分離して作成します。今回はES2015の復習も兼ねてるので、Class構文でFilterGalleryを作り、実装しています。各メソッドの説明は以下の通り。

  • 初期値の格納、イベントの設定
    constructor()
  • class:filtermenuのli要素がクリックされた際のメソッド
    onClickFilterMenu()
  • フィルターメニューの状態を更新させるメソッド
    updateMenu(targetFilter)
  • ギャラリーの表示状態を更新させるメソッド
    updateGallery(targetFilter)

※引数 targetFilterには、data-filter値で取得した値をセット