jquery 좋아요 및 취소 효과

소셜 미디어의 등장으로 좋아요는 인기 있는 사교 방법이 되었습니다. 소셜 미디어 플랫폼, 블로그, 웹사이트, 모바일 앱 등 무엇이든 좋아요는 많은 웹사이트 애플리케이션에서 필수적인 부분이 되었습니다. WordPress, Weibo, WeChat, Facebook, Zhihu 및 기타 플랫폼은 모두 사용자에게 유사한 기능을 제공하여 웹 사이트 운영에 상호 작용과 활동을 추가합니다.

이 기사에서는 jQuery 좋아요 및 취소 효과를 구현하는 방법, 웹 사이트에 좋아요 기능을 통합하는 방법, 사용자 상호 작용 경험을 개선하는 방법을 알아봅니다.

먼저 몇 가지 준비 작업을 준비해야 합니다. 이 예에서는 조금 더 간단한 좋아요 버튼을 만들어 보겠습니다. 몇 가지 HTML 코드가 필요합니다.

<div class="like">
  <span class="count">10</span>
  <a href="#" class="like-btn">点赞</a>
</div>

일반적인 CSS 스타일을 사용하여 좋아요 버튼과 카운터의 모양을 멋지게 꾸밀 수 있습니다.

두 번째 단계는 jQuery 스크립트를 작성하는 것입니다. 여기서는 클릭 이벤트 및 유사한 상태에 대한 모니터링을 처리해야 합니다.

먼저 HTML에 jQuery 라이브러리를 소개합니다:

<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

그런 다음 jQuery 스크립트를 작성합니다:

$(document).ready(function() {
 
  // 初始化点赞状态
  var isLiked = false;
 
  // 初始化点赞计数器
  var count = 10;
 
  // 绑定点赞按钮点击事件
  $('.like-btn').click(function() {
 
    if (isLiked) {
      // 取消点赞状态
      isLiked = false;
      // 更新按钮文案
      $(this).text('点赞');
      // 更新点赞计数器
      $('.count').text(--count);
    } else {
      // 添加点赞状态
      isLiked = true;
      // 更新按钮文案
      $(this).text('取消');
      // 更新点赞计数器
      $('.count').text(++count);
    }
 
  });
 
});

코드를 한 줄씩 분석해 보겠습니다.

// 初始化点赞状态
var isLiked = false;

변수를 사용하여 현재 유사 상태를 추적합니다. false code> 좋아요가 선택되지 않았음을 나타냅니다. <code>false 表示点赞未被选中。

// 初始化点赞计数器
var count = 10;

创建一个计数器，设置点赞数最初为 10。

// 绑定点赞按钮点击事件
$('.like-btn').click(function() {

使用 jQuery 选择器来选中页面中的点赞按钮，并在点击事件上绑定一个回调函数。

if (isLiked) {
  // 取消点赞状态
  isLiked = false;
  // 更新按钮文案
  $(this).text('点赞');
  // 更新点赞计数器
  $('.count').text(--count);
} else {
  // 添加点赞状态
  isLiked = true;
  // 更新按钮文案
  $(this).text('取消');
  // 更新点赞计数器
  $('.count').text(++count);
}

按顺序处理按钮的单击事件。我们检查 isLiked 的值，如果它是 false 表示当前按钮没有被选中，那么在处理函数中将其设置成 true。我们更新按钮文本，更新计数器的值，然后将 isLiked 设置为 true

});

카운터를 만들고 처음에는 좋아요 수를 10으로 설정하세요.

<div class="like">
  <span class="count">10</span>
  <button class="like-btn">点赞</button>
</div>

jQuery 선택기를 사용하여 페이지에서 좋아요 버튼을 선택하고 콜백 함수를 클릭 이벤트에 바인딩하세요.

rrreee

버튼 클릭 이벤트를 순차적으로 처리합니다. isLiked 값을 확인하고 이 값이 현재 버튼이 선택되지 않았음을 의미하는 false이면 핸들러 함수에서 true로 설정합니다. 버튼 텍스트를 업데이트하고, 카운터 값을 업데이트하고, isLiked를 true로 설정합니다. 유사한 상태를 더 이상 사용할 수 없을 때까지 또 다른 조건부 루프가 발생합니다.

rrreee

클릭 이벤트 처리 기능을 완료하고 클로저를 종료합니다.

마지막으로 다음과 같은 방법으로 좋아요 버튼을 활성화할 수 있습니다. 🎜rrreee🎜예제에서 렌더링된 버튼 스타일은 CSS를 통해 아름답게 만들 수 있습니다. 게다가 카운터 스타일도 지정할 수 있습니다. 🎜🎜요약하자면, 웹사이트 페이지에 맞게 스타일을 수정하고, 기능을 추가하고, 코드 로직을 조정할 수 있습니다. 🎜

위 내용은 jquery 좋아요 및 취소 효과의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!