つぶやき
-ブログ-

javascriptでフィルタリングを作成する方法

2023年4月12日

ECサイトで販売される商品のジャンル分けや、ニュースのジャンル分けでよく使われるのがフィルタリングです。下記のようにボタンを押すことで、そのボタンに関連される要素が表示されるようになります。

ということで今回はjavascriptでフィルタリングを作成する方法を解説します。

フィルタリングを作成できるコード

▢HTML

 <ul class="button_list">
        <li><button class="button_top">TOP</button></li>
        <li><button class="button_red">RED</button></li>
        <li><button class="button_blue">BLUE</button></li>
        <li><button class="button_green">GREEN</button></li>
    </ul>
    <ul class="filter_list">
        <li class="red color"></li>
        <li class="blue color"></li>
        <li class="green color"></li>
        <li class="red color"></li>
        <li class="blue color"></li>
        <li class="green color"></li>
        <li class="red color"></li>
        <li class="blue color"></li>
        <li class="green color"></li>
        <li class="red color"></li>
        <li class="blue color"></li>
        <li class="green color"></li>
    </ul>

▢CSS

.button_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  width: 900px;
  height: 100px;
}

.button_list li .button_top {
  cursor: pointer;
  background-color: grey;
  padding: 10px 20px;
  border-radius: 50px;
}

.button_list li .button_red {
  cursor: pointer;
  background-color: grey;
  padding: 10px 20px;
  border-radius: 50px;
  margin-left: 20px;
}

.button_list li .button_blue {
  cursor: pointer;
  background-color: grey;
  padding: 10px 20px;
  border-radius: 50px;
  margin-left: 20px;
}

.button_list li .button_green {
  cursor: pointer;
  background-color: grey;
  padding: 10px 20px;
  border-radius: 50px;
  margin-left: 20px;
}

.filter_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  width: 900px;
}

.filter_list li {
  margin-top: 20px;
}

.filter_list .red {
  background-color: #ff0000;
  width: 200px;
  height: 150px;
}

.filter_list .blue {
  background-color: #0000ff;
  width: 200px;
  height: 150px;
}

.filter_list .green {
  background-color: #008000;
  width: 200px;
  height: 150px;
}

▢javascript

 const topButton = document.querySelector(".button_top");
 const buttonRed = document.querySelector(".button_red");
 const buttonBlue = document.querySelector(".button_blue");
 const buttonGreen = document.querySelector(".button_green");
 const colors = document.querySelectorAll(".color");

colors.forEach((color) => {
 buttonRed.addEventListener("click", function () {
    if (color.classList.contains("red")) {
        color.style.display = "block";
       }
       else {
       color.style.display = "none";
       }
   　})
　　buttonBlue.addEventListener("click", function () {
     if (color.classList.contains("blue")) {
     color.style.display = "block";
       }
     　else {
      color.style.display = "none";
       }
    })

   buttonGreen.addEventListener("click", function () {
     if (color.classList.contains("green")) {
        color.style.display = "block";
        }
        else {
        color.style.display = "none";
        }
      })
　　　topButton.addEventListener("click", function () {
      color.style.display = "block";
      })
   })

ボタンと要素を配置する

まずはHTMLとCSSで上記のようにフィルタリングをかけるボタンと、それに関連した要素を配置します。今回は色別でカラーボックスをフィルタリングする機能を作成します。

javascriptでフィルタリング機能を作成する

定数を作成する

const topButton = document.querySelector(".button_top");
const buttonRed = document.querySelector(".button_red");
const buttonBlue = document.querySelector(".button_blue");
const buttonGreen = document.querySelector(".button_green");
const colors = document.querySelectorAll(".color");

まずは切り替え用の各ボタンや、各カラーボックスの要素を定数に格納します。

forEachで繰り返し処理を行う

colors.forEach((color) => {
　【省略】
})

さきほどは全てのカラーボックスをdocument.querySelectorAllで定数「colors」に格納しました。これをforEachを使って繰り返し処理させます。

クリックイベントを設定する

buttonRed.addEventListener("click", function () {
})

buttonBlue.addEventListener("click", function () {
})

buttonGreen.addEventListener("click", function () {
})

topButton.addEventListener("click", function () {
})

各カラーボックスを表示させるボタン、すべてのカラーボックスを表示させるボタン（topButton.）にaddEventListenerでクリックイベントを付与していきます。

条件分岐で処理を設定する

if (color.classList.contains("red")) {
   color.style.display = "block";
}
else {
　 color.style.display = "none";
 }

クリックイベントを設置したら、その内に条件分岐で処理を設定していきます。

上記のように赤色のボックスに付与しているredクラスが要素に含まれているなら表示する、それ以外のボックスなら非表示にするという記述をします。

これで赤色ボックス用のボタンをクリックすると、赤色のボックスが表示されて、それ以外のボックスが表示されなくなります。

この一連の処理を各カラーボックスに適用されているblueクラス、greenクラスにも適用すればフィルタリングの完成です。

すべてのボックスを表示させるイベントも設定する

topButton.addEventListener("click", function () {
color.style.display = "block";
})

すべてのボックスを表示させるリセット用のボタンのクリックイベントも作っておきましょう。こちらの場合は条件分岐は必要ありません。

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。お困りごと、ご相談、お気軽にご連絡ください。お問い合わせは、こちらから。

前の記事へ

次の記事へ

一覧へ戻る

つぶやき-ブログ-