クラスセレクタをトグルするだけのjQuery

最近UIにちょっとした動きを付ける時はJavascriptで動かさずにCSSで動かす事が増えてきた。

ReactとかVue.jsとかのサイトにデザインを入れる時は特に、コンポーネントの状態が動的に変わるので、要素の状態をクラスで持たせておいて、それを参照して状態が変わった時にcssが勝手に見栄えを変更する、という作りにするのが作りやすいし、後から見返してみた時にコードの見通しも良くなるし、動きをごっそり入れ替えたくなった時もCSSだけ直したら良いので非常に簡単で良い気がしている。

という流れで最近は普通の案件でもただクラスをつけたり外したりするだけのjsを書く事が増えてきていて、毎回 toggleClassとか addClass, removeClass ばっかり書くのも面倒なので、Javascriptを書かなくても要素にデータ属性を指定するだけで目的の要素に対して指定したクラスをつけたり外したりしてくれるjQueryプラグインを作ってみた。

demo: https://is8r.github.io/jquery-toggler/

repo: https://github.com/is8r/jquery-toggler

要素を動かす際に

• jsからはセレクタを追加するだけ
• cssで表示させたり消したり、見栄えを変更したりする

という仕様でサイトを作る時に便利。

もともとのJS自体が前述の通りシンプルなものなので、プラグインの作り自体は簡単なものになっているんだけど、使い方自体はBootstrapライクな使い方ができるようになっていて、クラスの追加、削除時にもイベントが発行されるようになっている。

使い方はa, buttonなどのボタン要素にdata-toggler=“A”とdata-target=“B”のデータ属性を追加し、クリック後にクラスを追加削除したい目的の要素を入れるだけ。 Aの部分には追加、削除したいセレクタ名を、Bの部分には目的となる要素の名前を入れる。

またa要素ではdata-targetを使わなくてもhref属性にターゲットを指定する事もできるるようになっている。