즐겨찾기 추가 및 해제 구현하기

html 소스
<div class="mt-4">
    <span class="rating-star">
        <span class="Unfavorites" value="Unfavorites"   style="display: inline;" onclick="favorites(this)"></span>
        <span class="Favorites" value="Favorites" style="display: none;" onclick="Unfavorites(this)"></span>
    </span>
</div>

 

js 소스

// 즐겨찾기 추가
   function favorites(e){
      var i = $(".Unfavorites").index(e); // 같은 클래스 내 index 값을 가져옴
      document.getElementsByClassName('Unfavorites')[i].style.display = "none"; // 즐겨찾기 취소 버튼 비활성화
      document.getElementsByClassName('Favorites')[i].style.display = "inline"; // 즐겨찾기 추가 버튼 활성화
   }
   // 즐겨찾기 해제
   function Unfavorites(e){
      var i = $(".Favorites").index(e); // 같은 클래스 내 index 값을 가져옴
      document.getElementsByClassName('Unfavorites')[i].style.display = "inline"; // 즐겨찾기 취소 버튼 비활성화
      document.getElementsByClassName('Favorites')[i].style.display = "none"; // 즐겨찾기 추가 버튼 활성화
   }

 

실행 결과