ボタンをクリックしたときに、ある条件を満たしたもの以外は消去する、というスクリプトを書いてみましょう。
フィルタリング機能とも呼ばれますが、ブログ、ECサイトなどへの応用が可能です。
コピペではなく、仕組みを理解してぜひ応用に挑戦してください！
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
指定した条件の要素だけをピックアップする
完成形はこんな感じです
See the Pen
color picker by taichi (@taichi_na)
on CodePen.
上の各色が書かれたボタンを押すと、その色の箱だけが表示されるようになっています。
ぱっと見で仕組みがなんとなく理解できるのではないでしょうか？
ボタンを押したときに、一度すべて消して、条件に合うものだけを表示させる仕組みになっています。
では実際に、作っていきましょう！
HTML, CSSでページをつくる
See the Pen
color picker by taichi (@taichi_na)
on CodePen.
上部にボタンが横並びに配置されています。
いずれも <button> 要素を使用して、フレックスボックスで横方向に等間隔で並べてあります。
button の value 属性には、それぞれボタンの内容と同じ値を書きました。
そしてその下には大量の <li> がありますね。本当は画像が良かったのですが、codepen で大量の画像を使うのにはちょっと抵抗があるので、ここでは背景に色を付けて四角にした <li> としました。それを
display: flex;
flex-wrap: wrap;
で等間隔に配置させ、かつ自動改行されるようにしてあります。
青の要素には class=”blue”
緑の要素には class=”green”
黄色の要素には class=”yellow”
とそれぞれにセレクタを付けて分類していますね。そのセレクタと同じ背景色を指定しています。
ここまでは特段難しいことはないと思います。
では、指定した色だけを表示させる仕組みを、jQuery で作っていきましょう。
指定したセレクタを持っているものだけ表示させる
See the Pen
color picker by taichi (@taichi_na)
on CodePen.
ではいつものように順番に一つずつ見ていきましょう。
1. $(“button”).click(function () {
button をクリックしたら function 内の関数を実行します。
2. var pick = $(this).attr(“value”);
変数 pick を作ります。button の value 値を取得し、それを変数 pick とします。
3. $(“#list li”).each(function () {
#list li すべてに対して同じ処理を実行する、というスクリプトです。
4. $(this).animate({ opacity: 0 }, 300, function () {
$(this).hide();
opacity 0 （見えなくなる）までアニメーションで変化させてから、消しています。
パッと消えるとちょっと違和感があるのでこうしています。
5. if ($(this).hasClass(pick) || pick == “all”) {
if 文になっています。もし pick (=クリックされた button と同じ class)を持っていた場合、これが一つ。
そして、or を意味する || をはさんで、
pick == “all” クリックされた button の value が “all” だった場合。これが条件の二つ目。
なぜ all を別に指定しているかというと、button側には value=”all” は存在しますが、li 側には class=”all” が存在しないからです。
6. $(this).show();
$(this).animate({ opacity: 1 }, 800);
li を表示させたのち、opacity: 1 までアニメーションで遷移させフワッと登場するようにします。
先ほどと重複しますが、all の処理についてです。
all がクリックされたときには、すべての li を表示します。なぜかというと、クリックされた li ではないから、自動的にすべての li が選択されるということですね。
まとめ：animate() メソッドをうまく使って、自然な遷移に見せる
See the Pen
color picker by taichi (@taichi_na)
on CodePen.
ということで、ボタンを押すと指定した条件を持つ要素のみ表示される仕組みを作ってみました。
ただ消したり表示したりするのではなく、animate() メソッドを組み合わせて自然な遷移を表現できていると思います。
そして、if文を使った条件分岐のところも理解できたでしょうか？
論理演算子である || を使って、どちらかの条件に当てはまれば、true を返すようにしてありました。
このように jQuery 内でも Java Script の仕組みを使って、どのようにイベントを起こしていくのか、順序だてて考えてみてください。
今日はここまでです。お疲れさまでした。
