toggleClassが機能しない問題。大問題。

こんにちわ。ゆーいです。

現在わたしは「Airbnb」というサイトを模写しております。

自分自身の知識がどこまで模倣できるのか、、、

そんな腕試し気分で行っています。

そんな中、問題が発生。

HTML、CSS、Bootstrap、、、、っと

手探りで少しずつ模写を進めていると、

やはり出てくるサイトのアニメーション。

Javaはまだ学習が進んでいないため、

Jqueryで解決していきたいなと。

きっとBootstrapとも相性がいいだろうと。

そんなことを思いながら

今日はチェックボックスのスタイリングをしていました。

元サイトさんのチェックボックスは

背景が黒、チェック自体が白、

borderがradius、４ｐｘのシンプルなもの

クリックすると、Span要素にSVGファイルが挿入されるように

組まれている様子。

仕組みがわかったため、一から組むのをやってみる事に。

デフォルトのチェックボックスは

opacityで消し、

その上に空要素（span）でおいて

そこに画像を挿入。

デフォルトのチェックボックスが

クリックされたら、

background-imageであらかじめ書いておいた

CSSのクラスをオンオフして表現、、、、

よし、ToggleClassの出番だ、、、、

っとここまで順調だったのですが、

実際にディベロッパーツールで挙動を確認すると

「class」のみ与えられる。そのあとがない。

What？

原因は結局わからず。調べても自分と同じ症状の人は

見つけられなかった。

おそらくだが、

jQueryの最高の教科書についてきたサンプルデータ上の

Toggleclassメソッドはしっかり動いていた、、、、

つまり、違う事はBootstrapを使っているかどうか、

のようです。

えー。

書き直しかなぁ、。

教えてくださいエロい人っていうのを

テラテイルで聞いてきます。

愚痴日記になってしまいました。

半年後の自分に託す。

解決していてくれ。