jQuery clickするごとに交互に処理を行う関数を作ってしまう

jQueryで’click()’というと、クリックしたときのイベント処理を行うメソッド。

例えば以下のように使います

しかし、これだけでは「クリックするごとに交互に処理を行う」というときに、若干めんどくさい。アコーディオンとかね。

slideToggleとかtoggleClassでなんとかなるレベルの処理ならいいけど、それ以上のこと、例えばテキストを変えたりしなきゃいけないとき、よく紹介されているのは、なんかflagをfalseにしといて、1回クリックされたらflagをtrueにして、もしflagがtrueだったときはこっちの処理を…とかもうややこしいので、もっとシンプルにやりたい。そうだ、どうせなら関数を作ってしまおうよ。







関数を作る

こんな感じで関数を作りましょう

これで、’clickToggle()‘という関数が使えるようになりました!関数は一度作ってしまえばどこでも使えます。

使う

使うときは以下のように使います

だいぶすっきり書けますね!’hover’とだいたい同じような書き方になる。

昔は’toggle()’という超便利な関数があったんですが、jQuery2以上から使えなくなりました。今でも普通に紹介されている記事いっぱいありますが、使えません。気をつけましょう

現場からは以上です。

フォローする