javascriptでフィルタリングを作成する方法 – 川越・埼玉のIT企業｜ホームページ制作・WebセキュリティならGIV株式会社

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

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

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

▢HTML

<div class="hcb_wrap">
<pre class="prism line-numbers lang-html" data-lang="HTML"><code><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></code></pre>
</div>

▢CSS

.
<div class="hcb_wrap">
<pre class="prism line-numbers lang-css" data-lang="CSS"><code>button_list<br />{ <br />display: -webkit-box;<br />display: -ms-flexbox;<br />display: flex; <br />-webkit-box-align: center; <br />-ms-flex-align: center; <br />align-items: center; <br />margin: 0 auto; <br />width: 900px; <br />height: 100px; <br />}</code></pre>
</div>
<div class="hcb_wrap">
<pre class="prism line-numbers lang-css" data-lang="CSS"><code>.button_list li .button_top {<br />cursor: pointer;<br />background-color: grey;<br />padding: 10px 20px;<br />border-radius: 50px; <br />}<br /><br />.button_list li .button_red {<br />cursor: pointer;<br />background-color: grey;<br />padding: 10px 20px;<br />border-radius: 50px;<br />margin-left: 20px; <br />} <br /><br />.button_list li .button_blue { <br />cursor: pointer;<br />background-color: grey;<br />padding: 10px 20px;<br />border-radius: 50px;<br />margin-left: 20px; <br />}<br /><br /> .button_list li .button_green { <br />cursor: pointer; <br />background-color: grey; <br />padding: 10px 20px; <br />border-radius: 50px; <br />margin-left: 20px; <br />} <br /><br />.filter_list {<br />display: -webkit-box;<br />display: -ms-flexbox;<br />display: flex;<br />-webkit-box-pack: justify;<br />-ms-flex-pack: justify;<br />justify-content: space-between;<br />-ms-flex-wrap: wrap;<br />flex-wrap: wrap;<br />margin: 0 auto;<br />width: 900px; <br />} <br /><br />.filter_list li {<br />margin-top: 20px;<br /> } <br /><br />.filter_list .red {<br />background-color:#ff0000;<br />width: 200px; <br />height: 150px; <br />}<br /><br /> .filter_list .blue { <br />background-color: #0000ff;<br />width: 200px;<br />height: 150px; <br />} <br /><br />.filter_list .green { <br />background-color: #008000; <br />width: 200px; <br />height: 150px; }</code></pre>
</div>

▢javascript

<div class="hcb_wrap">
<pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const topButton = document.querySelector(".button_top");<br />const buttonRed = document.querySelector(".button_red"); <br />const buttonBlue = document.querySelector(".button_blue"); <br />const buttonGreen = document.querySelector(".button_green"); <br />const colors = document.querySelectorAll(".color"); <br />colors.forEach((color) => {<br /><br />buttonRed.addEventListener("click", function () { <br />if (color.classList.contains("red")) { <br />color.style.display = "block"; }<br />else { color.style.display = "none"; } 　}) <br /><br />buttonBlue.addEventListener("click", function () { <br />if (color.classList.contains("blue")) { <br />color.style.display = "block"; } 　<br />else { color.style.display = "none"; } }) <br /><br />buttonGreen.addEventListener("click", function () { <br />if (color.classList.contains("green")) { <br />color.style.display = "block"; } <br />else { color.style.display = "none"; } })<br /><br />topButton.addEventListener("click", function () { color.style.display = "block"; }) })</code></pre>
</div>

ボタンと要素を配置する

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

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

定数を作成する

<div class="hcb_wrap">
<pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>const topButton = document.querySelector(".button_top"); <br />const buttonRed = document.querySelector(".button_red"); <br />const buttonBlue = document.querySelector(".button_blue"); <br />const buttonGreen = document.querySelector(".button_green"); <br />const colors = document.querySelectorAll(".color");</code></pre>
</div>

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

forEachで繰り返し処理を行う

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

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

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

<div class="hcb_wrap">
<pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>buttonRed.addEventListener("click", function () { }) buttonBlue.addEventListener("click", function () { }) buttonGreen.addEventListener("click", function () { }) topButton.addEventListener("click", function () { })</code></pre>
</div>

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

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

<div class="hcb_wrap">
<pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>if (color.classList.contains("red")) { <br />color.style.display = "block"; } <br />else <br />{ color.style.display = "none"; }</code></pre>
</div>

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

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

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

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

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

<div class="hcb_wrap">
<pre class="prism line-numbers lang-js" data-lang="JavaScript"><code>topButton.addEventListener("click", function () { color.style.display = "block"; })</code></pre>
</div>

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

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