코토의 전말

액티브 상태의 개소에 현재로서 FontAwesome의 아이콘을 붙이고 싶었습니다만,
jQuery에서 addClass라고 생각한 레이아웃이 되지 않는 사안이 발생.
haml로 직접 쓰고 조정하면 그렇게 편합니다.

그래서 소기 발견했기 때문에 메모가 쓰여집니다.

문제 사안

FontAwesome의 class를 jQuery로 addClass하면, class는 제대로 붙습니다만,
그 class가 부여된 곳의 레이아웃을 맞추는 것이 힘들었기 때문에 편한 방법 없을까~라고 생각했습니다.

아래와 같이 빈 태그를 준비하고,

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  

「 」 이것을 넣는 것으로, 공란 판정이 되지 않고, jQuery가 효과가 있습니다.

test.js

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

이런 느낌의 jQuery를 맞춰 봅시다.



무사히 activ 때만 현재 마크 붙었습니다!

끝에

반대의 방법으로서, 대단한 클래스를 지우는 것은 간단한 방법이었지만,
읽을 때 즐겁게 ~ 표시됩니다.
읽기 완료 후 현재 위치 만 아이콘이 붙어있는 상태가됩니다.
로딩 완료 후는 좋지만, 도중 경과가 기분 나빴기 때문에,
아무래도 제대로 필요한 부분에만 아이콘을 붙이는 방식으로 구현하고 싶었습니다.
그래서 소기 발견할 수 있어서 좋았다!
이것이 정말 좋은 방법인지 모르겠습니다.