font awesome 토글 버튼 만들기

font awesome에서 toggleButton을 만드는 데 어려움을 겪었습니다.

힘든 점

append로 HTML을 바꾸면 font awesome의 크기와 색이 이상해졌습니다.

toggleClass에서 "far"과 "fas"만을 toggle하면 클래스 이름이 끝에 추가되어 값을 제대로 얻을 수 없습니다.
ex) "far fa-3x fa-bookmark"가 "fa-3x fa-bookmark far"가 되고 classList[0]이 fa-3x로 변화합니다.

해결책

toggleClass에서 클래스 이름만 변경
append로 HTML을 통째로 바꾸는 것이 아니라, toggleClass로 클래스명만을 변경하면(자) 적절하게 CSS가 적응되어 해결할 수 있었습니다.

toggleClass에서 여러 클래스를 동시에 지정
toggleClass는 여러 클래스를 동시에 지정할 수있었습니다!
"far fa-3x fa-bookmark"와 통째로 지정하는 것으로 class명의 순서를 바꾸는 것 토글 할 수 있었습니다.
그 결과 classList[0]에서 far을 소득하는 데 성공했습니다!

실제 코드

다음은 javascript의 비동기 통신을 이용한 즐겨 찾기 기능 구현

_wordbook.html.haml

- if defined? fav
  - fav_id = fav.wordbook.id
- id = wordbook.id
- if user_signed_in?
    .wordbook__fav{"data-fav": fav_id}
      = button_tag do
        - if fav_id == id
          = icon("fas fa-3x", "bookmark")
        - else
          = icon('far fa-3x', 'bookmark')

fav.js

$(function(){
  // いいねの生成
  function like (id, status, button){
    var wordbook_id = id;
    var url = `api/wordbooks/${wordbook_id}`;
    var method = status == "far" ? "PATCH" : "DELETE";
    $.ajax({
      url: url,
      type: method
    })
    .done(function(){
      button.toggleClass("far fa-3x fa-bookmark");
      button.toggleClass("fas fa-3x fa-bookmark");
    })
    .fail(function(){
      window.alert("error");
    });
  }

  $(".wordbook__fav").on("click",function(){
    var id = $(this).parent()[0].dataset.id;
    var button = $(this).find("i");
    var status = button[0].classList[0];
    like(id, status, button);
  });
});

api/wordbooks_controller.rb

class Api::WordbooksController < ApplicationController
  def update
    @fav = Favorite.create(user_id: current_user.id,wordbook_id: params[:id])
  end
  def destroy
    @fav = Favorite.where(wordbook_id: params[:id]).find_by(user_id: current_user.id)
    @fav.destroy
  end
end

환경

Ruby 2.5.1
Ruby on Rails 5.2.3
젬 "jquery-rails"
gem "font-awesome-sass"