jqueryで絞り込み機能を作る方法(プラグインなし)

no_image js
no_image

絞り込み検索機能の作り方

記載方法はES6です

実行ではES6のバージョンを落として実行しています。

*メモレベル

 

コード

使い方

 

今回の実装のポイント

配列に任意の値が存在するか調べる方法

配列に任意の値が存在するか調べる方法は主に3つの方法がある。
  1. array.indexOf(value)
  2. $.inArray(value,array)
  3. ループと条件分岐の組み合わせ

array.indexOf(value)

valueに存在するか確かめたい値をいれることでarrayにその値が存在するかを調べることができる。

値が存在しない場合は-1返す

値が存在する場合は存在する場所のインデックス番号を返す

*****注意点*****

配列をオブジェクトにするとエラーとなる

 

$.inArray(value,array)

valueに存在するか確かめたい値をいれることでarrayにその値が存在するかを調べることができる。

値が存在しない場合は-1返す

値が存在する場合は存在する場所のインデックス番号を返す

*****注意点*****

配列をオブジェクトにするとエラーとなる

ループと条件分岐の組み合わせ

 

*****注意点*****

配列が0のときには作動しないので0の時も動いて欲しい場合は以下のように記載する。

応用すれば個数を数えることもできる

 

配列から任意の値をとりのぞきたい時

jqueryを使用するなら以下の方法で任意の値を取り除いて配列を作り直した方が早い。

listからvalueの値を除き、listに配列を作り直す。

.changeでチェックボックスの変化を監視し、変化があったボックスの値を参照したい時

チェックボックス全てに付与したクラスやinput:checkboxを使ってチェクボックスの変化を監視し、変化があればe.currentTargetにそのオブジェクトが入る。

cssとの非同期処理の関係でsetTimeoutを使う

絞り込みのアニメーションを以下のような挙動にしたい。

絞り込みアニメーション

 

流れは

要素を下方向にスライドさせながら徐々に透明化させる

要素の存在自体を消す

絞り込んだ要素を存在させて高さは保持するようにするが見た目には見えない+選択不可にする

要素が下から上方向にスライドしながら徐々に可視化させる

 

scss

jsから表示させたい要素に-visibleクラスをつけることで実現させている。

-visibleクラスを外せば元に戻るという仕組み。

だが、これでは表示したくない要素の存在を消すことができないので、jsからcssを操作して表示したくない要素にdisplay:none;をつけている。(表示したい要素にはblockをつける)

わざわざjsからつける理由はsetTimeoutを使ってタイミングをずらしたいから。

jsの処理とcssの処理は同期していないのでそれぞれが独立して動く。なので、もし、タイミングをずらさずに処理をしてしまうと、css上でのdisplay:none;の処理が完了する前に-visible処理が始まってしまう。

-visibleにはアニメーションがついてるが、displayの処理が完了すると、アニメーションが強制終了してしまうらしい。

 

コメント

タイトルとURLをコピーしました