font awesome 토글 버튼 만들기

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

힘든 점

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

해결책

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

실제 코드

- 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')

$(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);
  });
});

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

환경