>웹 프론트엔드 >JS 튜토리얼 >클릭 팔로우 및 취소 기능 예제의 jQuery 구현

클릭 팔로우 및 취소 기능 예제의 jQuery 구현

小云云
小云云원래의
2018-01-06 09:13:562711검색

이 인터넷 속어는 온라인 커뮤니티의 '좋아요' 기능에서 유래되었습니다. 귀하가 보내고 받는 좋아요 수, 좋아요 제공에 대한 선호도 등은 어느 정도 귀하가 누구인지, 어떤 상태에 있는지를 반영할 수 있습니다. 좋아요 뒤에는 당신이 반영됩니다. 이에 대응하는 취소 기능이 있습니다. 블로거가 최근에 APP 작업을 했는데 좋아요와 취소 기능을 구현하는 데 필요한 섹션 중 하나가 고민 끝에 JQuery 코드를 사용하여 구현하기로 결정했습니다.

먼저 JQuery 플러그인을 소개해야 합니다

두 번째로 p를 정의하고 여기에 스타일을 부여해야 합니다

다음에는 아래와 같은 JS 코드가 있습니다

$(document).ready(function(){
  var onOff=true;
  var p=$(".p");
  p.click(function(){  
    if (p.onOff) {
     p.val("关注我");
     p.css({"background":'#ccc'});
     p.onOff = false;
    } else {
     p.css({"background":'red'});
      p.val("已关注");
     p.onOff = true;
    }
   });
  });

구현 효과는 다음과 같습니다

JS 코드도 사용하기 쉽다는 것을 알 수 있습니다. 마찬가지로 이미지 전환 효과도 아래와 같이 얻을 수 있습니다

구현 코드는 다음과 같습니다

html :... 이벤트

위 내용은 클릭 팔로우 및 취소 기능 예제의 jQuery 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.