[TIL] 23.12.27

[오늘 시도한 것]

• card에 좋아요 버튼 및 더보기란 추가
• 추가한 버튼 클릭 시 각각 동작

[시도]

1) 좋아요 버튼 클릭 시 각각 동작되게 하기

$(document).ready(function () {
  $(".content").click(function () {

    $(this).toggleClass("heart-active");
    $(this).find(".like").toggleClass("heart-active");
    $(this).find(".heart").toggleClass("heart-active");
    $(this).find(".numb").toggleClass("heart-active");

    var heart = $(this).find(".heart")[0];
    var after = $(this).find(".after")[0];

    if (heart.style.display !== 'none') {      
        heart.style.display = 'none';
    } else {
        heart.style.display = "block";
    }

   if (after.style.display !== 'block') {
       after.style.display = 'block';
    } else {
       after.style.display = "none";
    }
  });
});

각각의 카드의 버튼을 눌렀을 때 실행하기 위해서는

 $(this)

위의 코드를 추가하면 클릭한 카드내에서의 동작이 실행된다.

2) 더보기란 클릭 시 각각 동작되게 하기

위의 1) 코드 공부 후 복습 겸 더보기란은 혼자 생각해보면서 코드를 작성했다.

1. 먼저 Bootstrap 에서 가져온 코드를 나만의 코드로 간단하게 변경하기

<div class="more text-center">
   <p class="d-inline-flex gap-1">
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"aria-expanded="false" aria-controls="collapseExample">
          <strong>추천 이유</strong> <i class="fa-solid fa-arrow-down fa-bounce" style="color: #7a35c0;"></i>
      </button>
    </p>
                    
   <div class="collapse" id="collapseExample">
      <div class="card card-body" role="button">
      </div>
   </div>
</div>

              ⬇️
              
<div class="more text-center">
   <button class="morebtn">
       <strong>추천 이유</strong> <i class="fa-solid fa-arrow-down fa-bounce"style="color: #7a35c0;"></i>
   </button>

   <ul class="morevision">
       <p><hr>작성하는 곳</p>
   </ul>

2.html 입력 후 CSS 입력 (생략)

3.Javascript 입력

$(".more").click(function () {

   var morevision = $(this).find(".morevision");
   morevision.slideToggle();

   if (morevision.style.display !== 'block') {
       morevision.style.display = 'block';
   } else {
       morevision.style.display = "none";
   }

});

[결과]

클릭 전에는 작성하는 곳이 접혀있다가 클릭 시 부드럽게 나타나도록 SlideToggle을 넣어서 코드를 작성했다.

처음에는

$(".more).click(function () {

으로 입력을 했더니 작동이 안되어서 어떤 부분이 문제인지 생각해보다가

클릭 시 나와야하는 부분이 들어있는 전체 영역이 입력되어 있는 것을 보고 변경해보았더니 내가 생각한 대로 동작이 되었다.

[배운점]

• Javascript는 모르는 부분이 많았는데 보고 배우면서 해본 후 직접 시도해보니 더욱 내 것으로 만들 수 있었다.
• Bootstrap에서 가져온 코드도 간단하게 변경하여 내가 원하는대로 편하게 사용가능하다.
• 작은 부분이나 맞춤법이 틀리지는 않았는지 한번씩 확인해보자.