jQueryでLPの要素を絞り込むボタンを設置する【動作事例あり】

やっほっほ、WEBエンジニアのテツヤマモト(@okapo192)です。

今回のテーマは「jQueryを要素の絞込みボタン」の設置方法です。

jQueryで要素を絞り込むボタンを作ってみたいけど、全然できねー

ネット上にあるようであまりないので、作り方を共有していきますね。

技術的な記事になるので、サクサクといきます。

スポンサーリンク

完成イメージ

今回やりたいのは、LPページの要素を絞り込むためのボタンを設置することです。

実際の動作事例がこちら「#はぴログ図鑑」になります(僕が参加してる語学コミュニティです!)。

こちらのGIF画像に、絞込みのボタンを設置していまして、クリックすると、メンバー表示が切り替わるようになってます。

具体的には、英語をクリックすると英語を勉強してる人だけ、スペイン語をクリックするとスペイン語を勉強してる人だけが表示される仕様です。

実際に書いたコード

今回コードを書くにあたっては、TAMコワーキングスペースさんの記事を参考にさせていただきました。

参考:jQueryでリスト表示を絞り込む処理を実装する-TAMコワーキンスグペースさん

ただ、僕のケースのように、不定数の属性を持っている事例がなかったので、結構改変して作りました。

HTMLコード

HTMLコードはこんな感じです(簡易化のため、要素少なめで紹介します)。

今回のケースでは、要素(言語)を1つ扱っている人、2つ扱っている人がいるので、data属性を2種類用意しています。

1つしか扱っていない人は、2つ目は空です。

(CSSはここでは省略します)

jQueryコードです

続きまして、jQueryです。

こんな感じです。

注意点として、3つ以上属性がある場合はfor以下のブロックを増やすか、新しい関数を作る必要があります。

後者の方が断然良いとは思うのですが、今回はギブアップです。

需要あれば考えてみて追記します(良いアイデアあれば共有してちょんまげ!)。

スポンサーリンク

終わりに

使いどころとしては、物販系だったり、ちょっとしたポータルサイトで大いに活躍しそうです。

複雑な絞込み処理ができるようになると、大きめのポータルサイト系の案件も扱えますね。

WEB制作者なら、この辺りのjQueryの処理は慣れておいたほうがよさそうですね。

困ったらTwitterにでも問い合わせてくれれば何かお助けしやす。

 

>>テツヤマモト(@okapo192)

 

▼WordPressサイトのカスタマイズの方法を他にも解説してます。

UdemyでWordPress制作を学べるおすすめコース4つ【全部買った】

2018.06.13

WordPress制作で月10万円稼ぐための最速勉強法【未経験から3ヶ月】

2018.05.30

ABOUT

海外ノマド系フリーランス, ブロガー, WEBエンジニア, 24歳。フットワーク軽く生きたくて、新卒でフリーに。その後、海外35カ国を旅しながらノマドワーク。現在は1ヶ月ごとに拠点を変えつつ、旅生活を継続中です。勉強が大好きで年に3回語学留学をします。 

>>詳しいプロフィールはこちら!