Help us understand the problem. What is going on with this article?

【jQuery】activの時にFontAwesomeをつけたい

コトの顛末

アクティブ状態の箇所にカレントとしてFontAwesomeのアイコンをつけたかったのですが、
jQueryでaddClassすると思ったようなレイアウトにならない事案が発生。
hamlで直書きして調整するとあんなに楽なのになぁ...

ということで小技発見したのでメモがてら書きます。

問題の事案

FontAwesomeのclassをjQueryでaddClassすると、classはちゃんとつくのですが、
そのclassが付与されたところのレイアウトを合わせるのが大変だったので楽な方法ないかな〜と思ってました。

下記のように空の<i>タグを用意して、

index.hmlt.haml
%i.fa

それにclassつけたら擬似的に直書きと同じことができる!って思ったんですが...

ブラウザで表示を確認すると、空タグのせいかレンダリングされたコードの中にいないため、
jQueryのaddClassが不発になるという事案が発生しました。

このような処理で小技を実行しました。

まず、普通に FontAwesomeのアイコン使いたいところに書き込みます。
これでスタイルを調整しておきます。

index.hmlt.haml
%i.fa.fa-play

でも、アクティブじゃない時は classの「fa-play」が必要ないので削除します。
しかし!このままでは空タグ扱いとなり、ブラウザ上で表示されない(つまり
jQueryが効かない)ため、スペースのエンティティタグを入れます。

index.hmlt.haml
%i.fa  

「&nbsp」これを入れることにより、空欄判定にならず、jQueryが効きます。

test.js
$(".fa").addClass("fa-play");

こんな感じのjQueryをあてがってあげましょう。

b31635ca63e9307306ce485f2179b203.png

無事にactiv時だけカレントマークつきました!

終わりに

逆の方法として、すでについているクラスを消すは簡単な方法でしたが、
読み込みの際に、ズラ〜っと表示され、
読み込み完了後に、カレント箇所だけアイコンがついている状態になる。
読み込み完了後は良いですが、途中経過が気持ち悪かったので、
どうしてもちゃんと必要な箇所にだけアイコンをつける方式で実装したかったのです。
なので小技発見できてよかった!
これが本当に良い方法かはわかりませんが。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした