> 웹 프론트엔드 > JS 튜토리얼 > JQuery가 클릭하여 팔로우 및 언팔로우 기능을 구현하는 방법

JQuery가 클릭하여 팔로우 및 언팔로우 기능을 구현하는 방법

WBOY
풀어 주다: 2017-07-24 17:14:16
원래의
1446명이 탐색했습니다.

마치 '동의하다', '사랑하다'를 뜻하는 인터넷 용어.

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

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

JQuery가 클릭하여 팔로우 및 언팔로우 기능을 구현하는 방법

두 번째로 div를 정의하고 스타일을 지정해야 합니다

JQuery가 클릭하여 팔로우 및 언팔로우 기능을 구현하는 방법

JQuery가 클릭하여 팔로우 및 언팔로우 기능을 구현하는 방법

다음은 JS 코드입니다. , 아래와 같이

$(document).ready(function(){

var onOff=true;

var div=$(".div");

div.click(function(){

if (div.onOff) {

div.val("팔로우하세요");

div.css({"Background":'#ccc'});

div.onOff = false;

} else {

div.css( {"배경":'red'});

div.val("팔로우됨");

div.onOff = true;

}

});

});

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

JQuery가 클릭하여 팔로우 및 언팔로우 기능을 구현하는 방법

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

JQuery가 클릭하여 팔로우 및 언팔로우 기능을 구현하는 방법

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

html:

css: 이미지 경로에 주의하세요

.div{

사용 사용 사용 사용             사용     out out out through out through out off ‐                                                                                      가볍다: 40px; Background-siZe: 80px; Background-Repeat: no-Repeat;}}

js 코드

). 준비(함수 () {

varming = true;

var div=$(".div");

 div.click(function(){

 if (div.onOff) {

 div. css({"Background-image":'url(img/guanzhu.png)'});

div.onOff = false;

div.onOff = true;

}

});

}) ;

위 내용은 JQuery가 클릭하여 팔로우 및 언팔로우 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿