はじめに
ボタンをクリックするたびに、表示要素を交互に表示と非表示を繰り返すjQueryのtoggleClass()メソッドがありましたので、使ってみようと試みました。しかし、うまく動作しませんでした。
この原因究明に施行錯誤したことを簡単に、メモしてみました。
toggleClass()メソッドのサンプル1
このサンプルは、うまく動作しなかったときのスクリプトです。最初は、自動検索ボタンが表示から非表示になりますが、以後は、テストボタンをクリックしても非表示のままです。リロードすると、再び、確認できます。
See the Pen toggleClass by tecoyan (@okpzwnyh-the-vuer) on CodePen.
toggleClass()メソッドのサンプル2
こちらのサンプルはうまく、動作したときのサンプルです。きちんと、自動検索ボタンがトグルして表示を交互に繰り返しています。
See the Pen aaa by tecoyan (@okpzwnyh-the-vuer) on CodePen.
原因の調査結果
これらのスクリプトは、試行錯誤を繰り返していた時のコードです。そのため、コードの切り貼りをくりかえしていました。よくよく、調べてみると、やはり、その時の残骸のコードが残っていたのが原因でした。
$("#auto_search_btn").css("display","none");というコードがありました。それが残骸のコードです。
このコードを外して実行してみると、うまく動作しました。
あとがき
toggleClass()メソッドは便利なメソッドですが、中途半端な理解で利用すると、無駄な時間を浪費してしまいます。今は、いろいろなケースで利用して、ノウハウを蓄積中です。